npm配置文件脚本定义.md

[TOC]

一、npm脚本原理

npm脚本的原理非常简单。每当执行npm run，就会自动新建一个Shell，在这个 Shell里面执行指定的脚本命令。因此，只要是Shell（一般是 Bash）可以运行的命令，就可以写在 npm脚本里面。

比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。

二、package.json

package.json是npm的配置文件，其中定义了项目基本信息、项目依赖库以及node运行脚本。

{
  "name": "vux-demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "vipinchan <chenweiping@xiamenair.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vux": "^2.2.0",
    "mockjs": "1.0.1-beta3"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

• dependencies字段指定了项目运行所依赖的模块；
• devDependencies指定项目开发所需要的模块。
• scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。
  安装新的模块：

npm install express --save  // 将该模块写入dependencies属性
npm install express --save-dev  // 将该模块写入devDependencies属性

三、脚本区及钩子

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "prebuild": "rm -f dist/prod/*.js && rm -f dist/test/*.js",
    "start": "npm run dev",
    "build": "npm run build:test && npm run build:prod",
    "build:prod": "webpack --env.NODE_ENV=production",
    "build:test": "webpack --env.NODE_ENV=test",
  },

1. 执行顺序

npm run build:test & npm run build:prod // 并行执行
npm run build:test && npm run build:prod // 串行执行

2. 钩子

npm脚本有pre和post两个钩子，会在命令的前后执行，如：

    "prebuild": "rm -f dist/prod/*.js && rm -f dist/test/*.js",
    "postbuild": "echo \"build success.\"",
    "build": "npm run build:test && npm run build:prod",

当前执行npm run build时，实际是执行情况是prebuild->build->postbuild。

四、相关链接

http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc1
https://docs.npmjs.com/misc/scripts