npm script 一見傾心

本文已同步在個人博客: ruizhengyun.cn/blog/post/7…

在看的各位都是老司機或者即將成爲老司機的鮮肉們都知道 package.json 了（別皮了，別說不知道啊），不過老司機的我仍是要說下如何科學用它。若是你是科學用的能夠跳過本章。

快速建立項目

npm script 依賴於文件 package.json。npm 爲咱們提供了快速建立 package.json 文件命令 npm init，執行會讓你回答幾個基本問題，如包名稱、版本號、做者信息、入口文件、倉庫地址、許可協議等，大多數都有默認值，你只需傻瓜式的敲回車就好。

package name: (project)
version: (0.1.0)
description: 
entry point: (index.js)
test command:
git repository:
keywords: 
license: (MIT)
複製代碼

package name 默認是項目文件夾名稱，而後我很懶，一路回車下來，而後獲得 package.json,

{
  "name": "project",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ruizhengyun <ruizhengyun@gmail.com> (https://github.com/ruizhengyun)",
  "license": "MIT"
}
複製代碼

若是想要修改，能夠直接改文件，也能夠從新 npm init 若是你不嫌煩的話。有人問，既然都是默認值，按可有跳過參數問答環節，快速生成 package.json。我想說，必須有啊，你都這麼想了，做者確定想到了。

npm init --force
npm init -f
npm init --yes
npm init -y
複製代碼

設置默認配置值

細心童鞋會發現 author 這欄信息很詳細，它怎麼知道個人帳號和郵箱還有github 地址的，太可怕了，城市套路這麼深。no,no,no,不要怕，這是我以前就設置過的，爲了省事，說白了就是懶（也是有學問的，DRY 原則）。那怎麼配置呢？

npm config set init.author.name "ruizhengyun"
npm config set init.author.email "ruizhengyun@gmail.com"
npm config set init.author.url "http://github.com/ruizhengyun"
npm config set init.license "MIT"
npm config set init.version "0.13.14"
複製代碼

刪除 package.json, 而後 npm init -y。

執行任意命令

打開 package.json，有這麼一欄

scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
複製代碼

在終端運行 npm run test，會看到輸出的是 Error: no test specified。爲何會輸出這個呢，由於你寫的就是要輸出它嘛。

npm run test 也可簡寫 npm test（內置命令） 或 npm t，就是讓你變懶。也可安裝 npm install -g ntl，而後命令行敲擊 ntl,而後經過方向鍵選擇要執行的命令，最後回車，實戰中可實用（別說我沒告訴過你）。

上面說了內置命令，一樣 npm start 也是內置支持的命令，可是你的在 package.json 中的 scripts 中加上 start 對應的命令內容才行。

說說 npm run

npm 是如何管理和執行各類 scripts 的呢？做爲內置核心功能，npm run 其實是 npm run-script 命令的簡寫（就是懶，沒毛病）。每次咱們執行 npm run xxx的時候（想起一首歌的歌詞），流程以下：

• 從 package.json 文件中讀取 scripts 對象裏面的所有配置；
• 以傳給 npm run 的第一個參數做爲鍵，如 xxx，在 scripts 對象裏面獲取對應的值做爲接下來要執行的命令，若是沒找到直接報錯；
• 在系統默認的 shell 中執行上述命令，系統默認 shell 一般是 bash，windows 環境下可能略有不一樣，稍後再講。（換電腦吧，前端程序員配個 mac,要懂得投資本身，男生女生都是）

舉個栗子：

{
  "name": "project",
  "version": "0.13.14",
  "description": "",
  "main": "index.js",
  "scripts": {
    "xxx": "eslint **.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "ruizhengyun <ruizhengyun@gmail.com> (https://github.com/ruizhengyun)",
  "license": "MIT"
}
複製代碼

若是不帶任何參數，執行 npm run，我只能說你真懶，不應懶的時候懶只會坑本身，它會列出可執行的全部命令，就像下面這樣

Lifecycle scripts included in project:
  test
    echo "Error: no test specified" && exit 1

available via `npm run-script`:
  xxx
    eslint **.js
複製代碼

因此要懂得何時該懶，何時不應（懶也是一門學問哦）。

再多句嘴，知道上面 eslint 命令怎麼來的? 其實，在 npm 執行指定 script 以前會把 node_modules/.bin 加到環境變量 $PATH 的前面，這就意味着任何內含可執行的文件的 npm 依賴均可以在 npm script 中直接調用。聽不明白？就是你不須要在 npm script 中加上可執行的完整路徑，如

scripts: {
    "xxx": "./node_modules/.bin/eslint **.js"
}
複製代碼

又扯到懶的學問了...

建立自定義的 npm script

說點有用的，不說 xxx 了。接下了建立咱們的項目hello-npm-script,而後添加實用腳本 eslint。

普及下 eslint 是社區中接受度比較高的 javascript 風格檢查工具，有大把現成的規則集供選擇，好比 google、airbnb

1.上須要被 eslint 的代碼

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';

const Comment = () => (<div>子組件</div>);

const App = () => {
  const name = 'npm script';
  return (
    <div> <h2>app</h2> </div>
  );
};

ReactDOM.hydrate(<App />, document.getElementById('root')); 複製代碼

2.添加依賴包 eslint

npm install -D eslint
// 或
npm install --save-dev eslint
複製代碼

3.初始化 eslint 用 eslint 檢查須要規則集，而存放規則集的文件就是配置文件，那規則文件須要以下文件生成（命令行）

./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript
? Would you like to install them now with npm? Yes

Successfully created .eslintrc.js file in /Users/ruizhengyun/dev/tutorial/npm-script/project
複製代碼

回車後根目錄就有了 .eslintrc.js 配置文件

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
  },
};
複製代碼

4.添加命令 eslint 在 package.json 的 scripts 字段中新增命令 eslint

{
    "scripts: {
        "eslint": "eslint **.jsx"
    }    
}
複製代碼

5.執行命令 eslint 還等什麼？作了這麼多不就等這一刻麼

npm run eslint
// 或
ntl
而後選擇 eslint
複製代碼

剩下的 error 和 warings 就是你的事了

你能夠...

上一篇：npm script 爲何選擇她

下一篇：npm script 多命令的運行

目錄：npm script 小書