npm scripts

在一定程度是，你无论如何都要使用npm，而同时npm提供了脚本功能，所以你在命令行中使用的命令都可以在 npm Scripts 中使用。你可以通过使用npm scripts替代gulp 这篇文章来了解npm scripts（相比gulp这类工具）的好处。

你可以克隆我的demo来查看npm-scripts-demo

1. npm scripts?

npm scripts 是记录在 package.json 中的 scripts 字段中的一些自定义脚本，使用自定义脚本，用户可以将一些项目中常用的命令行记录在 package.json中，不需要每次都要敲一遍。

{

    // ...

    "scripts": {

        "build": "node build.js"

    }

}

终端运行npm run build 等同于 node build.js

小技巧

通过 npm run 来查看所有的 scripts 命令

通过 npm ls --depth 0 列出已安装的 package

通过 npm run env可以列出当前项目的所有环境变量（通过 env 可以列出系统的所有环境变量）

2. package.json配置

{

    "name": "npm-scripts-demo",

    "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

        "presass": "echo before run sass",

        "sass": "node-sass src/style/index.scss src/dest/index.css",

        "postsass": "echo after run sass && echo $PATH",

        "remove" : "rm -rf src/dest",

        "scss": "node-sass --output-style compressed -o src/dist/css src/style",

        "lint": "eslint src/js",

        "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",

        "view": "echo $npm_package_name"，

        "viewjs": "node src/js/view.js"

},

    "devDependencies": {

        "eslint": "^4.12.0",

        "node-sass": "^4.7.2",

        "uglify-js": "^3.2.0"

    },

    "author": "",

    "license": "ISC"

}

3. 工具

node-sass: 解析scss文件

eslint： 代码检查

uglify：压缩js代码

onchange：监听文件变化

4. 环境变量PATH

环境变量（$PATH）：决定了shell将到哪些目录中寻找命令或程序，PATH的值是一系列目录，当运行一个程序时，Linux在这些目录下进行搜寻编译链接。通过运行 echo $PATH 查看当前的搜索路径。运行npm run env可以列出所有环境变量。

npm 脚本的原理：当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell可以运行的命令，就可以写在 npm 脚本里面。

脚本执行之前它会将node_modules/.bin/加入到环境变量PATH中，所以在 npm scripts 中可以直接使用那些存在于node_modules/.bin/中的可执行文件。执行结束后，再将PATH变量恢复原样。

可以：

"sass":"node-sass src/style/index.scss src/dest/index.css",

而不用：

"test":"./node_modules/.bin/node-sass src/style/index.scss src/dest/index.css"

运行 npm run sass 来查看环境变量的变化。

5. 钩子

在 npm script 中存在两个钩子，pre和post，sass脚本命令的钩子就是presass和postsass

"presass": "echo before run sass",

"sass": "node-sass src/style/index.scss src/dest/index.css",

"postsass": "echo after run sass",

npm提供的默认钩子：

prepublish, publish, postpublish：发布模块

preinstall, install, postinstall：安装模块

preuninstall, uninstall, postuninstall：卸载模块

preversion, version, postversion：在使用npm version 修改版本号的时候执行

pretest, test, posttest：执行 npm test 的时候

prestop, stop, poststop：执行 npm stop 的时候

prestart, start, poststart：执行 npm start 的时候

prerestart, restart, postrestart：执行 npm restart 的时候

6. 变量

通过npm_package_前缀，npm 脚本可以拿到package.json里面的所有字段。比如，对于上面第2点的package.json，

// view.js

console.log(process.env.npm_package_name); //  npm-scripts-demo ,

console.log(process.env.npm_package_version); // 1.0.0

console.log(process.env.npm_package_scripts_lint); // eslint src/js

运行 npm run viewjs

参考：

为什么使用 npm Scripts 构建项目

npm scripts 使用指南