npm并行执行命令

我们先来看下命令相关的符号

符号	作用
&&	顺序执行多条命令，当碰到执行的命令出错后停止，不再执行后续命令
&	并行执行多条命令

1，命令测试

1，&&

// test/node1.js
import process from "process";

setTimeout(console.log, 3000, "node1");
process.exit(1);

// test/node2.js
setTimeout(console.log, 1000, "node2");

{
  "scripts": {
    "node1": "node test/node1.js",
    "node2": "node test/node2.js",
    "all": "npm run node1 && npm run node2",
  },
}

执行npm run all：

• windows 和 mac 都打印node2。
• 注释掉 test/node1.js 中的 process.exit(1);，windows 和 mac 都先打印node1 --> 再打印node2。

windows 和 mac 表现一致。

2，&

// test/node1.js
setTimeout(console.log, 3000, "node1");

// test/node2.js
setTimeout(console.log, 1000, "node2");

{
  "scripts": {
    "node1": "node test/node1.js",
    "node2": "node test/node2.js",
    "all": "npm run node1 & npm run node2",
  },
}

执行npm run all

• windows：打印node1 --> 打印node2。说明 & 在windows中顺序执行。
• mac：打印node2 --> 打印node1。说明 & 在mac中并行执行。

& 在windows中不生效。

2，问题

1. 上面只是简单的测试，实际上在 windows 中的表现可能还有区别。
2. 顺序和并行的区别之一是，对于启动本地监听来说，算作命令执行完成停止（监听程序正常运行），不再执行后续命令。

举例：下面是一个 vite 项目引入 tailwindcss后，需要执行的2个命令

• npm run dev启动本地项目
• npm run tail启动 tailwindcss 监听文件变化，实时编译。

{
  "scripts": {
    "serve": "npm run dev && npm run tail",
    "dev": "vite",
    "tail": "tailwindcss -i ./src/style.css -o ./src/output.css --watch",
  },
}

实际表现中，如果用&&顺序执行npm run serve，则执行完第1个命令npm run dev后，不再执行第2个命令。

所以，一般这样的情况，都会选择并行执行。但&在 windows 中不是并行。所以需要跨平台的解决方案。

3，跨平台并行

2.1，concurrently

concurrently-github

npm i concurrently 安装后使用

{
  "scripts": {
    "serve": "concurrently \"npm run dev\" \"npm run tail\"",
    "dev": "vite",
    "tail": "tailwindcss -i ./src/style.css -o ./src/output.css --watch",
  },
}

npm run serve 即可并行执行。

2.2，npm-run-all

npm-run-all-github

npm i npm-run-all 安装后使用

{
  "scripts": {
    "serve": "npm-run-all --parallel dev tail",
    "dev": "vite",
    "tail": "tailwindcss -i ./src/style.css -o ./src/output.css --watch",
  },
}

npm run serve 即可并行执行。

使用 npm-run-all 的问题： CTRL+C无法退出监听程序，只能关闭终端来退出。

以上。