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