npm scripts 使用指南_前端开发者

前端开发者丨JavaScript

https://www.rokub.com

 

npm scripts 使用指南node 开发离不开 npm, 而脚本功能是 npm 最强大、 最常用的功能之一。
本文介绍如何使用 npm 脚本( npm scripts)。
一、 什么是 npm 脚本? npm 允许在 package.json 文件里面, 使用 scripts 字段定义脚本命令。 { // … “scripts”: { “build”: “node build.js” } } 1 2 3 4 5 6 { // … “scripts” : { “build” : “node build.js” } }上面代码是 package.json 文件的一个片段,里面的 scripts 字段是一个对象。
它的每一个属性, 对应一段脚本。
比如, build命令对应的脚本是nodebuild.js
命令行下使用npmrun命令, 就可以执行这段脚本。
$npmrunbuild# 等同于执行$nodebuild.js123$npmrunbuild# 等同于执行$nodebuild.js这些定义在package.json里面的脚本, 就称为npm脚本。
它的优点很多。
项目的相关脚本, 可以集中在一个地方。
不同项目的脚本命令, 只要功能相同, 就可以有同样的对外接口。
用户不需要知道怎么测试你的项目, 只要运行npmruntest即可。
即可。
可以利用npm提供的很多辅助功能。
查看当前项目的所有npm脚本命令, 可以使用不带任何参数的npmrun命令。
$npmrun1$npmrun二、 原理npm脚本的原理非常简单。
每当执行npmrun, 就会自动新建一个Shell, 在这个Shell里面执行指定的脚本命令。
因此, 只要是Shell( 一般是Bash) 可以运行的命令, 就可以写在npm脚本里面。
比较特别的是, npmrun新建的这个Shell, 会将当前目录的node_modules/.bin子目录加入PATH变量, 执行结束后, 再将PATH变量恢复原样。
这意味着, 当前目录的node_modules/.bin子目录里面的所有脚本, 都可以直接用脚本名调用, 而不必加上路径。
比如, 当前项目的依赖里面有Mocha, 只要直接写mochatest就可以了。
“test”: “mocha test”
1″test”: “mocha test”
而不用写成下面这样。
“test”: “./node_modules/.bin/mocha test”
1″test”: “./node_modules/.bin/mocha test”
由于npm脚本的唯一要求就是可以在Shell执行, 因此它不一定是node脚本, 任何可执行文件都可以写在里面。
npm脚本的退出码, 也遵守Shell脚本规则。
如果退出码不是0, npm就认为这个脚本执行失败。
三、 通配符由于npm脚本就是Shell脚本, 因为可以使用Shell通配符。
“lint”: “jshint *.js”
“lint”: “jshint **/*.js”
12″lint”: “jshint *.js”
“lint”: “jshint **/*.js”
上面代码中, *表示任意文件名, **表示任意一层子目录。
如果要将通配符传入原始命令, 防止被Shell转义, 要将星号转义。
“test”: “tap test/*.js”
1″test”: “tap test/*.js”
四、 传参向npm脚本传入参数, 要使用–标明。
“lint”: “jshint **.js”
1″lint”: “jshint **.js”
向上面的npmrunlint命令传入参数, 必须写成下面这样。
$npmrunlint—-reportercheckstyle>checkstyle.xml1$npmrunlint—-reportercheckstyle>checkstyle.xml也可以在package.json里面再封装一个命令。 “lint”: “jshint **.js”,”lint:checkstyle”: “npm run lint — –reporter checkstyle > checkstyle.xml”
12″lint”: “jshint **.js”,”lint:checkstyle”: “npm run lint — –reporter checkstyle > checkstyle.xml”
五、 执行顺序如果npm脚本里面需要执行多个任务, 那么需要明确它们的执行顺序。
如果是并行执行( 即同时的平行执行), 可以使用&符号。
$npmrunscript1.js&npmrunscript2.js1$npmrunscript1.js&npmrunscript2.js如果是继发执行( 即只有前一个任务成功, 才执行下一个任务), 可以使用&&符号。
$npmrunscript1.js&&npmrunscript2.js1$npmrunscript1.js&&npmrunscript2.js这两个符号是Bash的功能。
此外, 还可以使用node的任务管理模块: script-runner、 npm-run-all、 redrun。
六、 默认值一般来说, npm脚本由用户提供。
但是, npm对两个脚本提供了默认值。
也就是说, 这两个脚本不用定义, 就可以直接使用。
“start”: “node server.js”,
“install”: “node-gyp rebuild”
12″start”: “node server.js”,
“install”: “node-gyp rebuild”
上面代码中, npmrunstart的默认值是nodeserver.js, 前提是项目根目录下有server.js这个脚本; npmruninstall的默认值是node-gyprebuild, 前提是项目根目录下有binding.gyp文件。
七、 钩子npm脚本有pre和post两个钩子。
举例来说, build脚本命令的钩子就是prebuild和postbuild。
“prebuild”: “echo I run before the build script”,”build”: “cross-env NODE_ENV=production webpack”,”postbuild”: “echo I run after the build script”
123″prebuild”: “echo I run before the build script”,”build”: “cross-env NODE_ENV=production webpack”,”postbuild”: “echo I run after the build script”
用户执行npmrunbuild的时候, 会自动按照下面的顺序执行。
npmrunprebuild&&npmrunbuild&&npmrunpostbuild1npmrunprebuild&&npmrunbuild&&npmrunpostbuild因此, 可以在这两个钩子里面, 完成一些准备工作和清理工作。
下面是一个例子。
“clean”: “rimraf ./dist && mkdir dist”,”prebuild”: “npm run clean”,”build”: “cross-env NODE_ENV=production webpack”
123″clean”: “rimraf ./dist && mkdir dist”,”prebuild”: “npm run clean”,”build”: “cross-env NODE_ENV=production webpack”
npm默认提供下面这些钩子。
prepublish, postpublishpreinstall, postinstallpreuninstall, postuninstallpreversion, postversionpretest, posttestprestop, poststopprestart, poststartprerestart, postrestart自定义的脚本命令也可以加上pre和post钩子。
比如, myscript这个脚本命令, 也有premyscript和postmyscript钩子。
不过, 双重的pre和post无效, 比如prepretest和postposttest是无效的。
npm提供一个npm_lifecycle_event变量, 返回当前正在运行的脚本名称, 比如pretest、 test、 posttest等等。
所以, 可以利用这个变量, 在同一个脚本文件里面, 为不同的npmscripts命令编写代码。
请看下面的例子。
constTARGET= process.env.npm_lifecycle_event;
if (TARGET===’test’) {
console.log(`Running the test task!`);
}
if (TARGET===’pretest’) {
console.log(`Running the pretest task!`);
}
if (TARGET===’posttest’) {
console.log(`Running the posttest task!`);
}
12345678910111213
constTARGET= process.env.npm_lifecycle_event;
if (TARGET===’test’) {
console.log(` Running the test task ! `);
}
if (TARGET===’pretest’) {
console.log(` Running the pretest task ! `);
}
if (TARGET===’posttest’) {
console.log(` Running the posttest task ! `);
}
八、 简写形式四个常用的npm脚本有简写形式。
npmstart是npmrunstart是npmstop是npmrunstop的简写是的简写npmtest是npmruntest的简写是的简写npmrestart是npmrunstop&&npmrunrestart&&npmrunstart的简写npmstart、 npmstop和npmrestart都比较好理解, 而npmrestart是一个复合命令, 实际上会执行三个脚本命令: stop、 restart、 start。
具体的执行顺序如下。
prerestartprestopstoppoststoprestartprestartstartpoststartpostrestart九、 变量npm脚本有一个非常强大的功能, 就是可以使用npm的内部变量。
首先, 通过npm_package_前缀, npm脚本可以拿到package.json里面的字段。
比如, 下面是一个package.json。 {
“name”: “foo”,
“version”: “1.2.5”,
“scripts”: {
“view”: “node view.js”
}
}
1234567{
“name”: “foo”,
“version”: “1.2.5”,
“scripts”: {
“view”: “node view.js”
}
}
那么, 变量npm_package_name返回foo, 变量npm_package_version返回1.2.5。
// view.js console.log(process.env.npm_package_name); // foo console.log(process.env.npm_package_version); // 1.2.5 1 2 3 // view.js console . log ( process . env . npm_package_name ) ; // foo console . log ( process . env . npm_package_version ) ; // 1.2.5上面代码中,我们通过环境变量 process.env 对象,拿到 package.json 的字段值。
如果是Bash脚本, 可以用$npm_package_name和$npm_package_version取到这两个值。
npm_package_前缀也支持嵌套的package.json字段。 “repository”: {
“type”: “git”,
“url”: “xxx”
},scripts: {
“view”: “echo $npm_package_repository_type”
}
1234567″repository”: {
“type”: “git”,
“url”: “xxx”
},scripts: {
“view”: “echo $npm_package_repository_type”
}
上面代码中, repository字段的type属性, 可以通过npm_package_repository_type取到。
下面是另外一个例子。
“scripts”:{
“install”:”foo.js”
}
123″scripts”:{
“install”:”foo.js”
}
上面代码中, npm_package_scripts_install变量的值等于foo.js。
然后, npm脚本还可以通过npm_config_前缀, 拿到npm的配置变量, 即npmconfiggetxxx命令返回的值。
比如, 当前模块的发行标签, 可以通过npm_config_tag取到。
“view”:”echo $npm_config_tag”, 1″view”:”echo $npm_config_tag”, 注意, package.json里面的config对象, 可以被环境变量覆盖。 {
“name”:”foo”,
“config”:{
“port”:”8080″
},
“scripts”:{
“start”:”node server.js”
}
}
12345{
“name”:”foo”,
“config”:{
“port”:”8080″
},
“scripts”:{
“start”:”node server.js”
}
}
上面代码中, npm_package_config_port变量返回的是8080。
这个值可以用下面的方法覆盖。
$npmconfigsetfoo:port801$npmconfigsetfoo:port80最后, env命令可以列出所有环境变量。 “env”:”env”
1″env”:”env”
十、 常用脚本示例// 删除目录 “clean”: “rimraf dist/*”, // 本地搭建一个 HTTP 服务 “serve”: “http-server -p 9090 dist/”, // 打开浏览器 “open:dev”: “opener https://www.rokub.com:9090”, // 实时刷新 “livereload”: “live-reload –port 9091 dist/”, // 构建 html 文件 “build:html”: “jade index.jade > dist/index.html”, // 只要 css 文件有变动,就重新执行构建 “watch:css”: “watch ‘npm run build:css’ assets/styles/”, // 只要 html 文件有变动,就重新执行构建 “watch:html”: “watch ‘npm run build:html’ assets/html”, // 部署到 Amazon S3 “deploy:prod”: “s3-cli sync ./dist/ s3://example-com/prod-site/”, // 构建 favicon “build:favicon”: “node scripts/favicon.js”, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 删除目录 “clean” : “rimraf dist/*” , // 本地搭建一个 HTTP 服务 “serve” : “http-server -p 9090 dist/” , // 打开浏览器 “open:dev” : “opener https://www.rokub.com:9090” , // 实时刷新 “livereload” : “live-reload –port 9091 dist/” , // 构建 HTML 文件 “build:html” : “jade index.jade > dist/index.html” , // 只要 css 文件有变动,就重新执行构建 “watch:css” : “watch ‘npm run build:css’ assets/styles/” , // 只要 HTML 文件有变动,就重新执行构建 “watch:html” : “watch ‘npm run build:html’ assets/html” , // 部署到 Amazon S3 “deploy:prod” : “s3-cli sync ./dist/ s3://example-com/prod-site/” , // 构建 favicon “build:favicon” : “node scripts/favicon.js” 。

 

前端开发者丨JavaScript

https://www.rokub.com

» 本文来自:前端开发者 » 《npm scripts 使用指南_前端开发者》
» 本文链接地址:https://www.rokub.com/2223.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!