npm腳本和package.json

一、什麼是npm腳本

　　在建立node.js項目如一個vue項目，或一個react項目時，項目都會生成一個描述文件package.json 。

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

{
//...
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e",
    "lint": "eslint --ext .js,.vue src test/e2e/specs",
    "build": "node build/build.js"
  },
}

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

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

$ npm run build

　　等同於執行：

$ node build/build.js

　　同理，上面的那段scripts中，  npm  run  test  等同於 npm  run  e2e   , 等同於  node test/e2e/runner.js  

　　這些定義在package.json裏面的腳本，就稱爲npm腳本。項目的相關腳本，能夠集中在一個地方；不一樣項目的腳本命令，只要功能相同，就能夠有一樣的對外接口。好比用戶不須要知道怎麼測試你的項目，只要運行 npm  run  dev 便可

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

$ npm run

 

二、npm原理

　　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

 

六、默認值

　　通常來講，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 。具體的執行順序以下：

1. prerestart
2. prestop
3. stop
4. poststop
5. restart
6. prestart
7. start
8. poststart
9. 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": "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",

 

十一、package.json其餘配置項說明

　　對於dependencies和devDependencies的一些說明：

　　使用npm安裝依賴時，若是使用--save安裝的依賴，會被寫到dependencies模塊裏面去；

　　而使用--save-dev安裝的依賴，則會被寫到devDependencies模塊裏面去；若是什麼都不寫，則默認安裝到dependencies裏面去。

　　好比咱們使用的一些構建工具例如glup、webpack這些只在開發環境中才用到的包，則只須要寫到devDependencies中便可。

　　對於兩種環境的指定方式，則是經過配置文件中的 process.env.NODE_ENV = 'development'  或  process.env.NODE_ENV = 'production'  來指定是開發仍是生產環境。

 

十二、package.json中的bin屬性

　　package.json中的bin是命令名和本地文件的映射。若是是全局安裝，則會把文件映射到全局的bin裏面去，安裝後，在任意地方打開終端使用命令行執行該文件；

若是是本地安裝，則會把文件映射到本項目的./node_modules/.bin文件夾裏面，安裝後，在本工程目錄裏面使用命令行執行該文件。

　　舉例說明：

1. 新建一個文件夾，打開終端，進入該文件夾，經過命令  npm init -y 建立一個package.json文件。
2. 而後在package.json文件同級目錄下新建一個index.js文件，加上測試數據。注意，index.js文件的頭部必須有這個 #!/usr/bin/env node 節點。
3. 在package.json中增長bin屬性，設置命令名和index.js的映射關係。
4. 在終端當前目錄中進行全局安裝： npm install -g   
5. 安裝成功後，則在電腦任意文件夾打開終端，執行package.json中bin中設置的命令，都會執行對應的index.js中的代碼。 以下圖

 

 

　　同時，咱們打開全局的bin文件夾，能夠發現bin下面的剛剛添加的全局命令 tan-temp-bin 

　　像咱們一些經常使用vue、vue-cli、create-react-app等都是經過bin屬性將命令映射到了全局上的

 

參考連接：

阮一峯--npm  scripts使用指南：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html