其实这是好多年前遇到的一个问题,早已经解决,只是最近整理书签发现原始链接已经无法访问了,就自己记录一下。
npm run
很多同学在刚接触前端框架的时候都会使用cli工具,官方文档都会有以下脚本:
1 | npm run dev |
如果我们有去研究过 npm run ,会发现实际是执行的一个本地/全局命令脚本:
1 | vite |
然后进一步搜索,然后我们就会发现 npm run 查询命令的顺序是:
- 先找 项目本地 node_modules/.bin 里的命令(最优先)
- 找不到 → 再去系统全局找
- 还找不到 → 报错
找到对应的文件后,再执行
1 | node ./node_modules/vite/bin/vite.js |
此时我们可以发现,npm run 命令实际上就是执行了 node 命令,并传入了文件路径。
如果我们想执行多个命令,那么我们可以使用 npm run 命令的 –script-shell 选项,比如:
1 | npm install && npm run dev |
如果你恰好在mac或者linux系统下,则可以完美运行,但是在windows系统下,你会发现只运行了第一条命令。
解决方法
因为windows系统下,npm run 命令的默认执行shell是 cmd.exe,而 cmd.exe 不支持 && 符号,因此只能使用 & 符号。
我们可以引入 cross-env ,然后就可以兼容windows系统了。
1 | cross-env npm run build:test1 && npm run build:test2 |
cross-env
实际上 cross-env 远不止如此,在开发或者构建过程中,我们很多时候都需要设置环境变量,比如需要设置当前的环境:NODE_ENV=production。但是在不同的平台下,环境变量的设置方式不同,比如在 windows 下,我们需要使用 set 命令,而 linux 下,我们需要使用 export 命令,如:
| 系统 | 设置环境变量语法 |
|---|---|
| Mac/Linux | export NODE_ENV=production |
| Windows | CMD set NODE_ENV=production |
| Windows | PowerShell $env:NODE_ENV=production |
cross-env 模块可以解决这个问题,它可以根据当前系统自动选择正确的环境变量设置命令,如:
1 | "build": "cross-env NODE_ENV=production npm run build:test1 && npm run build:test2" |
[越努力,越幸运!]