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