Node 開發離不開 npm，而指令碼功能是 npm 最強大、最常用的功能之一。
本文介紹如何使用 npm 指令碼（npm scripts）。
一、什麼是 npm 指令碼？
npm 允許在package.json檔案裡面，使用scripts欄位定義指令碼命令。
|
1 2 3 4 5 6 |
{ // ... "scripts": { "build": "node build.js" } } |
上面程式碼是package.json檔案的一個片段，裡面的scripts欄位是一個物件。它的每一個屬性，對應一段指令碼。比如，build命令對應的指令碼是node build.js。
命令列下使用npm run命令，就可以執行這段指令碼。
|
1 2 3 |
$ npm run build # 等同於執行 $ node build.js |
這些定義在package.json裡面的指令碼，就稱為 npm 指令碼。它的優點很多。
- 專案的相關指令碼，可以集中在一個地方。
- 不同專案的指令碼命令，只要功能相同，就可以有同樣的對外介面。使用者不需要知道怎麼測試你的專案，只要執行
npm run test即可。- 可以利用 npm 提供的很多輔助功能。
檢視當前專案的所有 npm 指令碼命令，可以使用不帶任何引數的npm run命令。
|
1 |
$ npm run |
二、原理
npm 指令碼的原理非常簡單。每當執行npm run，就會自動新建一個 Shell，在這個 Shell 裡面執行指定的指令碼命令。因此，只要是 Shell（一般是 Bash）可以執行的命令，就可以寫在 npm 指令碼里面。
比較特別的是，npm run新建的這個 Shell，會將當前目錄的node_modules/.bin子目錄加入PATH變數，執行結束後，再將PATH變數恢復原樣。
這意味著，當前目錄的node_modules/.bin子目錄裡面的所有指令碼，都可以直接用指令碼名呼叫，而不必加上路徑。比如，當前專案的依賴裡面有 Mocha，只要直接寫mocha test就可以了。
|
1 |
"test": "mocha test" |
而不用寫成下面這樣。
|
1 |
"test": "./node_modules/.bin/mocha test" |
由於 npm 指令碼的唯一要求就是可以在 Shell 執行，因此它不一定是 Node 指令碼，任何可執行檔案都可以寫在裡面。
npm 指令碼的退出碼，也遵守 Shell 指令碼規則。如果退出碼不是0，npm 就認為這個指令碼執行失敗。
三、萬用字元
由於 npm 指令碼就是 Shell 指令碼，因為可以使用 Shell 萬用字元。
|
1 2 |
"lint": "jshint *.js" "lint": "jshint **/*.js" |
上面程式碼中，*表示任意檔名，**表示任意一層子目錄。
如果要將萬用字元傳入原始命令，防止被 Shell 轉義，要將星號轉義。
|
1 |
"test": "tap test/\*.js" |
四、傳參
向 npm 指令碼傳入引數，要使用--標明。
|
1 |
"lint": "jshint **.js" |
向上面的npm run lint命令傳入引數，必須寫成下面這樣。
|
1 |
$ npm run lint -- --reporter checkstyle > checkstyle.xml |
也可以在package.json裡面再封裝一個命令。
|
1 2 |
"lint": "jshint **.js", "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml" |
五、執行順序
如果 npm 指令碼里面需要執行多個任務，那麼需要明確它們的執行順序。
如果是並行執行（即同時的平行執行），可以使用&符號。
|
1 |
$ npm run script1.js & npm run script2.js |
如果是繼發執行（即只有前一個任務成功，才執行下一個任務），可以使用&&符號。
|
1 |
$ npm run script1.js && npm run script2.js |
這兩個符號是 Bash 的功能。此外，還可以使用 node 的任務管理模組：script-runner、npm-run-all、redrun。
六、預設值
一般來說，npm 指令碼由使用者提供。但是，npm 對兩個指令碼提供了預設值。也就是說，這兩個指令碼不用定義，就可以直接使用。
|
1 2 |
"start": "node server.js"， "install": "node-gyp rebuild" |
上面程式碼中，npm run start的預設值是node server.js，前提是專案根目錄下有server.js這個指令碼；npm run install的預設值是node-gyp rebuild，前提是專案根目錄下有binding.gyp檔案。
七、鉤子
npm 指令碼有pre和post兩個鉤子。舉例來說，build指令碼命令的鉤子就是prebuild和postbuild。
|
1 2 3 |
"prebuild": "echo I run before the build script", "build": "cross-env NODE_ENV=production webpack", "postbuild": "echo I run after the build script" |
使用者執行npm run build的時候，會自動按照下面的順序執行。
|
1 |
npm run prebuild && npm run build && npm run postbuild |
因此，可以在這兩個鉤子裡面，完成一些準備工作和清理工作。下面是一個例子。
|
1 2 3 |
"clean": "rimraf ./dist && mkdir dist", "prebuild": "npm run clean", "build": "cross-env NODE_ENV=production webpack" |
npm 預設提供下面這些鉤子。
- prepublish，postpublish
- preinstall，postinstall
- preuninstall，postuninstall
- preversion，postversion
- pretest，posttest
- prestop，poststop
- prestart，poststart
- prerestart，postrestart
自定義的指令碼命令也可以加上pre和post鉤子。比如，myscript這個指令碼命令，也有premyscript和postmyscript鉤子。不過，雙重的pre和post無效，比如prepretest和postposttest是無效的。
npm 提供一個npm_lifecycle_event變數，返回當前正在執行的指令碼名稱，比如pretest、test、posttest等等。所以，可以利用這個變數，在同一個指令碼檔案裡面，為不同的npm scripts命令編寫程式碼。請看下面的例子。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const TARGET = process.env.npm_lifecycle_event; if (TARGET === 'test') { console.log(`Running the test task!`); } if (TARGET === 'pretest') { console.log(`Running the pretest task!`); } if (TARGET === 'posttest') { console.log(`Running the posttest task!`); } |
八、簡寫形式
四個常用的 npm 指令碼有簡寫形式。
npm start是npm run startnpm stop是npm run stop的簡寫npm test是npm run test的簡寫npm restart是npm run stop && npm run restart && npm run start的簡寫
npm start、npm stop和npm restart都比較好理解，而npm restart是一個複合命令，實際上會執行三個指令碼命令：stop、restart、start。具體的執行順序如下。
- prerestart
- prestop
- stop
- poststop
- restart
- prestart
- start
- poststart
- postrestart
九、變數
npm 指令碼有一個非常強大的功能，就是可以使用 npm 的內部變數。
首先，通過npm_package_字首，npm 指令碼可以拿到package.json裡面的欄位。比如，下面是一個package.json。
|
1 2 3 4 5 6 7 |
{ "name": "foo", "version": "1.2.5", "scripts": { "view": "node view.js" } } |
那麼，變數npm_package_name返回foo，變數npm_package_version返回1.2.5。
|
1 2 3 |
// view.js console.log(process.env.npm_package_name); // foo console.log(process.env.npm_package_version); // 1.2.5 |
上面程式碼中，我們通過環境變數process.env物件，拿到package.json的欄位值。如果是 Bash 指令碼，可以用$npm_package_name和$npm_package_version取到這兩個值。
npm_package_字首也支援巢狀的package.json欄位。
|
1 2 3 4 5 6 7 |
"repository": { "type": "git", "url": "xxx" }, scripts: { "view": "echo $npm_package_repository_type" } |
上面程式碼中，repository欄位的type屬性，可以通過npm_package_repository_type取到。
下面是另外一個例子。
|
1 2 3 |
"scripts": { "install": "foo.js" } |
上面程式碼中，npm_package_scripts_install變數的值等於foo.js。
然後，npm 指令碼還可以通過npm_config_字首，拿到 npm 的配置變數，即npm config get xxx命令返回的值。比如，當前模組的發行標籤，可以通過npm_config_tag取到。
|
1 |
"view": "echo $npm_config_tag", |
注意，package.json裡面的config物件，可以被環境變數覆蓋。
|
1 2 3 4 5 |
{ "name" : "foo", "config" : { "port" : "8080" }, "scripts" : { "start" : "node server.js" } } |
上面程式碼中，npm_package_config_port變數返回的是8080。這個值可以用下面的方法覆蓋。
|
1 |
$ npm config set foo:port 80 |
最後，env命令可以列出所有環境變數。
|
1 |
"env": "env" |
十、常用指令碼示例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 刪除目錄 "clean": "rimraf dist/*", // 本地搭建一個 HTTP 服務 "serve": "http-server -p 9090 dist/", // 開啟瀏覽器 "open:dev": "opener http://localhost:9090", // 實時重新整理 "livereload": "live-reload --port 9091 dist/", // 構建 HTML 檔案 "build:html": "jade index.jade > dist/index.html", // 只要 CSS 檔案有變動，就重新執行構建 "watch:css": "watch 'npm run build:css' assets/styles/", // 只要 HTML 檔案有變動，就重新執行構建 "watch:html": "watch 'npm run build:html' assets/html", // 部署到 Amazon S3 "deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/", // 構建 favicon "build:favicon": "node scripts/favicon.js", |
十一、參考連結
- How to Use npm as a Build Tool, by Keith Cirkel
- Awesome npm scripts, by Ryan Zimmerman
（完）