目录
一, 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 <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
来源: http://www.bubuko.com/infodetail-2673367.html