一、简介
- 在
package.json
中scripts
字段内可以自定义运行命令,例如:
{ ... "scripts": { "dev": "webpack -w" }, .... }
- 执行原理
使用$ npm run script
执行脚本的时候都会创建一个shell
,然后在shell
中执行指定的脚本。
这个shell
会将当前项目的可执行依赖目录(即node_modules/.bin
)添加到环境变量path
中,当执行之后之后再恢复原样。就是说脚本命令中的依赖名会直接找到node_modules/.bin
下面的对应脚本,而不需要加上路径。
二、指令执行顺序
&
与&&
的区别
{ ... "scripts": { // '&' 并行执行,同时执行所有指令 "dev1":"node test.js & webpack" // '&&' 串行执行,前一个指令执行完才会执行下一个指令,一个一个来 "dev2":"node test.js && webpack" }, .... }
- 例如:打包测试一个本地
js
包,需要使用gulp
打包压缩后,在通过npm link
创建本地测试链接
// 本来每次要执行的顺序 // gulp 压缩到 dist 文件夹,同时完成配置文件转移 $ gulp // 进入 dist 文件夹 $ cd dist/ // 创建本地 npm 测试链接 $ npm link // 返回主文件夹,方便下次继续操作 $ cd .. // 浓缩成一个命令 "test": "gulp && cd dist/ && npm link && cd .. && exit 1" // 可以不用 exit 1 结束退出,它内部有优化 "test": "gulp && cd dist/ && npm link && cd .." // 可以不用 cd .. 返回上级目录,由于它是内部开的 shell 进程完成的,可以看看子shell的概念,所以它从执行开始到结束都会保持在当前目录 // 这就是最终需要写的命令: "test": "gulp && cd dist/ && npm link"
三、cross-env
的使用
- 安装(
一般脚手架创建的工程里面已经有安装,没安装就手动安装下
)
$ npm i -D cross-env
- 在
node.js
执行环境中,在所有模块里都可以访问到一个全局进程变量process
- 在
process
全局变量身上都一个对象叫env
==>process.env
- 由于
JavaScript
是非常动态的语言,可以随意在任意对象上任意的添加属性。所以很多前端脚手架配置文件里的process.env.NODE_ENV
就是在node.js
执行环境下的全局对象process.env
上添加了一个很简单的字符串 (development、production
)。 cross-env
是一个第三方库,可以不在.js
文件中,以命令的方式给process.env
(特定对象上 & 配置文件之外)动态的添加各种属性,在package.json
中的scripts
脚本配置,而且它还是跨平台的.
{ ... "scripts": { "dev1": "cross-env name=1111" "dev2": "cross-env age=20" }, .... } // 上述两句配置等价于在 js 模块中,然后可以直接使用该字段,会自动绑定注入到 env 对象中 process.env.name = '111' process.env.age = '20'
- 如果需要在设置属性后,执行额外命令,直接空格跟着写在后面即可
{ ... "scripts": { // 例如:设置好属性 name 后,在通过 node 命令执行以下 index.js 文件 // 可以理解为 cross-env name=1111 设置的 name 属性就是给 index.js 使用的 "dev1": "cross-env name=1111 node index.js" // 按序执行多个命令 "dev2": "cross-env name=1111 node index.js && cd dist/" }, .... }