package scripts在前端項目的使用

前端的項目每每依賴了不少打包、部署工具，好比grunt，gulp，webpack.....，在這麼多打包、部署工具裏，有這各自的命令，這樣給項目帶來了不少煩惱，不一樣的項目不一樣的命令，有沒有辦法統一接口呢？那麼能夠考慮把命令都封裝到npm scripts裏。

以前都是知道個大概，抽空索性都瞭解下。

npm run

npm run xxx，能夠執行package.json裏script對應的命令，而且是shell腳本。可是在執行的時候有一個小處理。

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

可是前提是在node_moduels/.bin 目錄下要有對應到 node_modules 裏的soft link。好比

$ cd node_modules/.bin 
$ ls -al
$ lrwxr-xr-x   1 jan  staff    25 Jun  3 17:03 webpack -> ../webpack/bin/webpack.js

hook

在每一個命令前都會執行對應命令的pre+scriptname 腳本，每一個命令結束後會執行對應買了的post+scriptname腳本。若是沒有定義，則不會執行對應的pre ，post命令。

好比咱們在scripts裏定義。

 

scripts: {
  "prebuild" : "echo \" this is pre build \"",
  "build" : "echo \" this is build \"",
  "postbuild" : "echo \" this is post build \""
}

 

npm run build

會輸出 

> test-npm-script@1.0.0 prebuild /Users/jan/workspace/web/test-npm-script
> echo " this is pre build "
​
 this is pre build 
​
> test-npm-script@1.0.0 build /Users/jan/workspace/web/test-npm-script
> echo " this is build "
​
 this is build 
​
> test-npm-script@1.0.0 postbuild /Users/jan/workspace/web/test-npm-script
> echo " this is post build "
​
 this is post build  

這點很棒，你能夠在執行某些命令前、後作一些操做，好比build前清空目錄，build後作一些壓縮之類的事

默認的腳本

npm會默認設置一些script的值，好比start和install，固然你能夠覆蓋這2個值。

start

若是你在項目里根目錄有一個server.js，而後你又沒本身定義start script，那麼npm run start，就會執行server.js

server.js

 

console.log("this is server.js");

 

 

$ npm run start
​
> this is server.js

 

固然能夠設置prestart 和poststart腳本

scripts : {  
    "prestart" : "echo \" this is pre start \"",
    "poststart" : "echo \" this is post start \""
}

 執行下：

$ npm run start
​
> test-npm-script@1.0.0 prestart /Users/jan/workspace/web/test-npm-script
> echo " this is pre start "
​
 this is pre start 
​
> test-npm-script@1.0.0 start /Users/jan/workspace/web/test-npm-script
> node server.js
​
this is server.js
​
> test-npm-script@1.0.0 poststart /Users/jan/workspace/web/test-npm-script
> echo " this is post start "
​
 this is post start 

　　

 

install

當你的模塊被安裝時，會默認執行這個腳本。前提是你沒本身定義install腳本，而後有一個binding.gyp 文件。具體的npm會執行

 

"install": "node-gyp rebuild"

 

這個腳本能夠幫助node模塊編譯 c++ 模塊。

生命週期事件

• prepublish：在模塊被髮布前，其實在你安裝本地包也會觸發

• publish, postpublish：在發佈後執行

• preinstall：模塊被安裝前執行

• install, postinstall：模塊安裝後

• preuninstall, uninstall：模塊被卸載前執行

• postuninstall：模塊卸載後執行

• preversion, version：獲取版本號前執行

• postversion：獲取版本號以後執行

• pretest, test, posttest：執行test腳本時會執行

• prestop, stop, poststop：在腳本結束時執行

• prestart, start, poststart：調用start時執行

• prerestart, restart, postrestart：在執行restart時會調用

restart腳本比較特殊，若是你設置了restart腳本則只會執行：prerestart, restart, postrestart，可是若是你沒有設置restart，則會執行stop，start腳本。好比咱們設置以下腳本配置。

"scripts": {
    "prestop" : "echo \" this is pre stop \"",
    "stop" : "echo \" this is stop \"",
    "poststop" : "echo \" this is post stop \"",
​
    "prestart" : "echo \" this is pre start \"",
    "start" : "echo \" this is start \"",
    "poststart" : "echo \" this is post start \"",
      
    "prerestart" : "echo \" this is pre start \"",
    "postrestart" : "echo \" this is post start \"",
  }
 

　　

npm run restart

會輸出

this is pre restart 
this is pre stop 
this is stop 
this is post stop 
this is pre start 
this is start 
this is post start
this is post restart 

簡寫

有幾個簡寫，不必定一些寫全npm run xxx

npm start === npm run start
npm stop === npm run stop
npm test === npm run test
npm restart === npm run rerestart 

一個完整的package

{
  "name": "test-npm-script",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin" : {
    "main":"bin/main.js",
    "dev":"bin/dev.js"
  },
  "scripts": {
    "pretest" : "echo \" this is pre test \"",
    "test" : "echo \" this is test \"",
    "posttest" : "echo \" this is post test \"",
​
    "prerestart" : "echo \" this is pre restart \"",
    "restart" : "echo \" this is restart \"",
    "postrestart" : "echo \" this is post restart \"",
    
    "prestop" : "echo \" this is pre stop \"",
    "stop" : "echo \" this is stop \"",
    "poststop" : "echo \" this is post stop \"",
​
    "prestart" : "echo \" this is pre start \"",
    "start" : "echo \" this is start \"",
    "poststart" : "echo \" this is post start \"",
​
    "preinstall" : "echo \" this is pre install \"",
    "install" : "echo \" this is install \"",
    "postinstall" : "echo \" this is post install \"",
​
    "prepublish" : "echo \" this is pre install \"",
    "publish" : "echo \" this is publish \"",
    "postpublish" : "echo \" this is post install \"",
​
    "preuninstall" : "echo \" this is pre uninstall \"",
    "uninstall" : "echo \" this is uninstall \"",
    "postuninstall" : "echo \" this is post uninstall \"",
    
    "prebuild" : "echo \" this is pre build \"",
    "build" : "echo \" this is build \"",
    "postbuild" : "echo \" this is post build \""
  },
  "author": "",
  "license": "ISC"
}　

 

參考資料

• npm scripts 使用指南

• npm-scripts