npm run 运行多条命令

其实这是好多年前遇到的一个问题,早已经解决,只是最近整理书签发现原始链接已经无法访问了,就自己记录一下。

npm run

很多同学在刚接触前端框架的时候都会使用cli工具,官方文档都会有以下脚本:

1
2
npm run dev
npm run build

如果我们有去研究过 npm run ,会发现实际是执行的一个本地/全局命令脚本:

1
2
vite
NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build

然后进一步搜索,然后我们就会发现 npm run 查询命令的顺序是:

  1. 先找 项目本地 node_modules/.bin 里的命令(最优先)
  2. 找不到 → 再去系统全局找
  3. 还找不到 → 报错

找到对应的文件后,再执行

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"

[越努力,越幸运!]