你真的瞭解npm-scripts嗎？

咱們都很熟悉的，經過 npm run script-name 能夠執行 package.json 中 scripts 對象配置的腳本。可是，你或許不知道下面這些知識。

下文中 npm-scirpt 指 package.json scripts 中配置的腳本命令。name-scirpt 指代某一個名字爲 name 的腳本命令。

生命週期腳本/自定義腳本

當咱們使用命令 npm start 時，npm 會嘗試執行 package.json scripts 中配置的 start 腳本命令。start-script 的默認配置爲 "start": "node server.js"。因此若是項目根目錄下有 server.js 文件，那麼經過 npm start 會直接運行 server.js 中的代碼。

除了 start-script ，當使用 npm start 命令時，npm 一樣會嘗試在 package.json scripts 中查找是否配置了 prestart，poststart 腳本命令。若是都配置了，npm 會按照如下順序執行腳本。

• npm run prestart
• npm run start
• npm run poststart

相似的，npm test, npm restart, npm stop 都會按照以上的方式執行 scripts 中配置的對應腳本。同時 npm 會經過 npm_lifecycle_event 環境變量標識當前處於哪一階段（所謂的生命週期）。好比，在 prestart-script 腳本執行階段 npm_lifecycle_event 的值爲 "prestart"，start-script 階段，值爲 "start"，即 package.json scripts 對象配置的腳本名字。

以上是 npm 內置命令對應的腳本執行邏輯，對於咱們平時最熟悉的自定義腳本，以上邏輯一樣適用。好比咱們配置了 "build": "webpack --mode=production"，同時配置了 prebuild 以及 postbuild 腳本，當使用 npm run build 時，一樣會依次執行 prebuild-script、build-script、postbuild-script。

任意腳本

咱們配置的腳本命令，如 "start": "node server.js"，node server.js 會當作一行代碼傳遞給系統的 SHELL 去解釋執行。實際使用的 SHELL 可能會根據系統平臺而不一樣，類 UNIX 系統裏，如 macOS 或 linux 中指代的是 /bin/sh， 在 windows 中使用的是 cmd.exe。

既然是交給 SHELL 去解釋執行的，說明配置的腳本能夠是任意可以在 SHELL 中運行的命令，而不單單是 node 腳本或者 js 程序。即若是你的系統裏安裝了 python（或者說系統變量 PATH 裏能找到 python 命令），你也能夠將 scripts 配置爲 "myscript": "python xxx.py"

環境變量

上面提到了在使用 npm run script-name 命令時，npm 會設置一個環境變量 npm_lifecycle_event。實際上 npm 還會設置不少環境變量，經過內置命令 npm run env 能夠查看 npm 爲腳本運行時設置的全部環境變量。 其中 package.json 中設置的全部字段，都會被設置爲 npm_package_ 開頭的環境變量。若是你的 packge.json 設置以下

{
  "name": "npm-demo",
  "version": "1.0.0",
  "script": {
    "build": "webpack --mode=production"
  },
  "files": ["src"]
}
複製代碼

PATH 上面提到了 npm-script 執行前會設置一些環境變量，其中很重要的一個環境變量是 PATH。npm 會將項目 node_modules/.bin 的絕對路徑添加到環境變量 PATH 中。所以咱們能夠在 npm-script 中使用項目本地安裝的一些命令行工具。如上面設置的 build 腳本： "build": "webpack --mode=production"。

只要咱們本地安裝了 webpack，就能夠在項目的 node_modules/.bin 路徑下看到 webpack 可執行文件。又由於 node_modules/.bin 路徑已經添加到 PATH 中，因此腳本運行時可以在 PATH 中找到 webpack 命令，從而順利執行。

最後，爲何 webpack 安裝後，可以在 node_modules/.bin 路徑下找到對應的可執行文件？能夠查看

docs.npmjs.com/files/packa…

Reference

docs.npmjs.com/cli/run-scr…

docs.npmjs.com/misc/script…

docs.npmjs.com/files/packa…

原文連接： github.com/DDFE/DDFE-b…