在一定程度是,你无论如何都要使用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
参考:
网友评论