让脚本代替你大部分工作

有些重复性的工作，如果能用脚本代替，那就「毫不犹豫」用脚本把这些工作替代吧。自工作以来我一直追求这种工作模式，自学了 python 和 shell，比如以前做 iOS 的时候，我写了一些脚本：

做前端以后，发现用 node 实现脚本更方便，对于前端项目来说，npm 天生支持执行脚本 ，最近改造 element-ui 深有体会，改造后可以做到：

1、发布网站时执行 npm run deploy 即可把打包好的静态资源发布到 pages 服务上（类似于 github pages），可作为一个文档网站使用；

2、发布 npm 包时执行 npm run pub 即可发布私有 npm 包；

3、通过 npm run lint:el 和 npm run lint:bd 即可在不同的代码规范中随意切换；

你可以不用在乎 1、2、3 的具体功能是什么，只需知道可用脚本把「繁琐重复的工作」自动化。可以参考 element-ui 的具体做法，它的 scripts 中包含了非常多的命令，我截一个图：

从图中可以看出，不同的命令完成了不同的工作，同时可以把这些单独的指令合并到一起使用。在编写 npm scripts 时需要掌握下面内容才能让你的脚本用起来更便捷：

1、a || b，表示如果 a 执行不成功，就执行 b

"bootstrap": "yarn || npm i" ，表示如果使用 yarn 执行不成功，就使用 npm i 来执行；

2、a & b，表示 a 和 b 的命令可以同时执行

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js"，表示使用 node 同时执行 iconInit.js 和 build-entry.js；

3、a && b，表示 a 执行成功后才会执行 b，如果 a 执行失败，b 将不会执行

"dev": "npm run bootstrap && npm run build:file"，只有 npm run bootstrap 执行成功后才会执行 npm run build:file；

4、执行 npm run 可以输出当前项目执行的所有命令；

这个命令可以帮你查看当前项目中都有哪些可执行的 npm scripts；

5、*表示任意文件名，**表示任意一层子目录；

"lint": "eslint src/**/* test/**/*"

6、设置环境变量

对于线上和线下环境可以通过设置不同的环境变量来做区分，设置环境变量 NODE_ENV 为 development，这样在代码中可通过 process.env.NODE_ENV 来获取，比如：

"dev": cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js"

"dev:play":"PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",

上面两个代码都可以通过 process.env.NODE_ENV 和 process.env.PLAY_ENV 来获取脚本运行时设置的值；

写在最后

通过上面的分析，你一定能够读懂 element-ui 中全部的 npm scripts

"bootstrap": "yarn || npm i",

执行 yarn 或者 npm i；

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",

通过 node 同时运行 build/bin 下的 iconInit.js、build-entry.js、i18n.js、version.js 这几个文件，它们就是几个普通的 js 文件：

"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",

执行完 npm run bootstrap 成功后，执行脚本 git-release.sh  ，再执行release.sh    ，最后用 node 执行 gen-indices.js。

dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",

这个命令看起来比较长，其实就是一些命令的拼接组合，在执行时刻执行 npm scripts 定义的其它命令。

其它命令都大同小异，不再赘述，本文的目的希望每个人能够善用脚本，大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/