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

參考資料


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM