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