package.json scripts 腳本使用指南

Node 開發離不開 npm，而腳本功能是 npm 最強大、最常用的功能之一。本文介紹如何使用 npm 腳本（npm scripts）。

一、package.json scripts 腳本是什麼

npm 允許在package.json文件裏面，使用scripts字段定義腳本命令。

{
  "scripts": {
    "build": "node build.js"
  }
}

上面代碼是package.json文件的一個片段，裏面的scripts字段是一個對象。它的每一個屬性，對應一段腳本。比如，build命令對應的腳本是node build.js。

命令行下使用npm run命令，就可以執行這段腳本。

$ npm run build
# 等同於
$ node build.js

這些定義在package.json裏面的腳本，就稱爲 npm 腳本。它的優點很多。

項目的相關腳本，可以集中在一個地方。
不同項目的腳本命令，只要功能相同，就可以有同樣的對外接口。用戶不需要知道怎麼測試你的項目，只要運行npm run test即可。
可以利用 npm 提供的很多輔助功能。

查看當前項目的所有 npm 腳本命令，可以使用不帶任何參數的npm run命令。

$ npm run
# 查看當前項目的所有命令

二、執行原理

npm 腳本的原理非常簡單。每當執行npm run，就會自動新建一個 Shell，在這個 Shell 裏面執行指定的腳本命令。

因此，只要是 Shell（Bash）可以運行的命令，就可以寫在 npm 腳本里面。

比較特別的是，npm run新建的這個 Shell，會將當前目錄的node_modules/.bin子目錄加入PATH變量，執行結束後，再將PATH變量恢復原樣。

這意味着，當前目錄的node_modules/.bin子目錄裏面的所有腳本，都可以直接用腳本名調用，而不必加上路徑。比如，當前項目的依賴裏面有 Mocha，只要直接寫mocha test就可以了。

"test": "mocha test"

而不用寫成下面這樣。

"test": "./node_modules/.bin/mocha test"

由於 npm 腳本的唯一要求就是可以在 Shell 執行，因此它不一定是 Node 腳本，任何可執行文件都可以寫在裏面。npm 腳本的退出規則，也遵守 Shell 腳本規則。如果退出碼不是0，npm 就認爲這個腳本執行失敗。

三、通配符

由於 npm 腳本就是 Shell 腳本，因爲可以使用 Shell 通配符。

"lint": "jshint *.js"
"lint": "jshint **/*.js"

上面代碼中，*表示任意文件名，**表示任意一層子目錄。

如果要將通配符傳入原始命令，防止被 Shell 轉義，要將星號轉義。

"test": "tap test/\*.js"

四、傳參

向 npm 腳本傳入參數，要使用--標明。

"lint": "jshint **.js"

向上面的npm run lint命令傳入參數，必須寫成下面這樣。

$ npm run lint --  --reporter checkstyle > checkstyle.xml

也可以在package.json裏面再封裝一個命令。

"lint": "jshint **.js",
"lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"

五、執行順序

如果 npm 腳本里面需要執行多個任務，那麼需要明確它們的執行順序。

如果是並行執行（即同時的平行執行），可以使用&符號。

$ npm run script1.js & npm run script2.js

如果是繼發執行（即只有前一個任務成功，才執行下一個任務），可以使用&&符號。

$ npm run script1.js && npm run script2.js

這兩個符號是 Bash 的功能。此外，還可以使用 node 的任務管理模塊：script-runner、npm-run-all、redrun。

六、默認值

一般來說，npm 腳本由用戶提供。但是，npm 對兩個腳本提供了默認值。也就是說，這兩個腳本不用定義，就可以直接使用。

"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。

"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的時候，會自動按照下面的順序執行。

npm run prebuild && npm run build && npm run postbuild

因此，可以在這兩個鉤子裏面，完成一些準備工作和清理工作。下面是一個例子。

"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命令編寫代碼。請看下面的例子。

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!`);
}

注意，prepublish這個鉤子不僅會在npm publish命令之前運行，還會在npm install（不帶任何參數）命令之前運行。這種行爲很容易讓用戶感到困惑，所以 npm 4 引入了一個新的鉤子prepare，行爲等同於prepublish，而從 npm 5 開始，prepublish將只在npm publish命令之前運行。

八、簡寫形式

四個常用的 npm 腳本有簡寫形式。

npm start是npm run start

npm 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。

{
  "name": "foo", 
  "version": "1.2.5",
  "scripts": {
    "view": "node view.js"
  }
}

那麼，變量npm_package_name返回foo，變量npm_package_version返回1.2.5。

// 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字段。

  "repository": {
    "type": "git",
    "url": "xxx"
  },
  scripts: {
    "view": "echo $npm_package_repository_type"
  }

上面代碼中，repository字段的type屬性，可以通過npm_package_repository_type取到。

下面是另外一個例子。

"scripts": {
  "install": "foo.js"
}

上面代碼中，npm_package_scripts_install變量的值等於foo.js。

然後，npm 腳本還可以通過npm_config_前綴，拿到 npm 的配置變量，即npm config get xxx命令返回的值。比如，當前模塊的發行標籤，可以通過npm_config_tag取到。

"view": "echo $npm_config_tag",

注意，package.json裏面的config對象，可以被環境變量覆蓋。

{ 
  "name" : "foo",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}

上面代碼中，npm_package_config_port變量返回的是8080。這個值可以用下面的方法覆蓋。

$ npm config set foo:port 80

最後，env命令可以列出所有環境變量。

"env": "env"

十、常用腳本

// 刪除目錄
"clean": "rm -rf dist && mkdir dist",
"example": "export DEBUG=table* && babel-node ./example/example.js",
"test": "export DEBUG=table && babel-node ./test/test.js",
"build": "./node_modules/.bin/babel src --out-dir dist",

// 可以簡寫成下面的形式
"build": "babel src --out-dir dist",
"build:pkg": "babel bin --out-dir dist/bin --copy-files",
"prepublishOnly": "npm run clean && npm run build",

// 配置環境變量
"start": "export DEBUG=table* && node scripts/start.js",
"build": "node ./scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"pub:es": "npm run clean && export BABEL_ENV=production && babel src --out-dir es --copy-files",
"pub:lib": "npm run clean && export BABEL_ENV=node && babel src --out-dir lib --copy-files",
"pub:um": "npm run clean:dist && export RABEL_ENV=production && webpack --config ./config/webpack.config.pub.js",
"pub:optimized": "rm es/setting.js es/i18n.js es/index.local.js && rm lib.settings.js lib/i18n.js lib/index.local.js",
"prepublishOnly": "npm run pub:lib && npm run pub:es && npm run pub:umd && npm run pub:optimized"

// 本地搭建一個 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",

十一、Michael 總結

npm run test 相當於直接使用 nodeJS 運行腳本（node test.js node scripts/test.js）
既然是 nodeJS，那麼可以運行 bash 類似的操作
使用 npm run 查看當前項目中支持的腳本；npm 可以直接運行 node_mobules/.bin 下面的命令（不需要重新設置環境變量）例如直接使用 mocha jest babel 等
支持通配符：** 表示任意目錄 * 表示任意文件名；文件名和文件路徑需要轉義
支持參數：使用 – 表示傳參 npm run lint --repoeter or npm install --no-audit
支持執行順序：兩條命令之間，如果是並行的命令，使用 & 分割；兩條命令之間，如果具有先後次序，使用 && 分割 rm -rf dist & rm -rf bin or rm -rf dist && mkdir dist && babel src --out-dir dist
默認腳本：npm start - npm install 對應 node setver.js node-gyp rebuild 如果已經有腳本就執行
鉤子函數：執行一個命令同時執行的函數：npm run publish 實際上執行 npm run prepublish && npm run publish && npm run postpublish 前處理階段可以進行編譯；結束階段可以清理環境，刪除編譯後的內容
簡寫形式：npm start npm stop (省略run)
獲取 package.json 中的變量 process.env 對象可以獲取（版本號和名稱，或者需要傳入的其他變量）

參考阮一峯老師的博客

package.json scripts 腳本使用指南

package.json scripts 腳本使用指南

一、package.json scripts 腳本是什麼

二、執行原理

三、通配符

四、傳參

五、執行順序

六、默認值

七、鉤子

八、簡寫形式

九、變量

十、常用腳本

十一、Michael 總結

React 與 VUE 數據傳輸對比

前端學習SVN版本控制代碼管理

log4js 安裝和配置

更改自定義 input CheckBox 顏色

拒絕佛系，堅持擼碼

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結