目錄

• 一、npm腳本原理
• 二、package.json
• 三、腳本區及鉤子
• 四、相關鏈接

一、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 <[email protected]>",
  "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

npm配置文件腳本定義.md