npm-run-all 简单使用

最近新项目发现前端研发公司开始使用mysticatea/npm-run-all 这个神器，这个工具是为了解决官方的 npm run 命令无法同时运行多个脚本的问题，它可以把诸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一长串的命令通过 glob 语法简化成 npm-run-all clean build:* 这样精致小巧的模样。再者大家也知道 shell 的 & 语法实际上是不支持 cmd 的，为了跨平台也最好使用这样的第三方库来提供支持。

安装

$ npm install npm-run-all --save-dev
# 或者
$ yarn add npm-run-all --dev

顺序执行

$ npm-run-all clean lint build

依次执行三个任务，注意如果某个脚本退出时返回值为空值，那么后续脚本默认是不会执行的，你可以使用参数 --continue-on-error 来规避这种行为。

并行执行

$ npm-run-all --parallel lint build

npm-run-all 提供了多种运行多个命令的方式，常用的有以下几个：

--parallel: 并行运行多个命令，例如：npm-run-all --parallel lint build
--serial: 多个命令按排列顺序执行，例如：npm-run-all --serial clean lint build:**
--continue-on-error: 是否忽略错误，添加此参数 npm-run-all 会自动退出出错的命令，继续运行正常的
--race: 添加此参数之后，只要有一个命令运行出错，那么 npm-run-all 就会结束掉全部的命令

结合package.json即可快速多线程打包

{
  "name": "xinsec-iot",
  "version": "4.1.0",
  "description": "vite + qiankun + vue3",
  "main": "index.js",
  "scripts": {
    "install": "npm-run-all --parallel install:*",
    "install:main": "cd ./main && npm install",
    "install:sys": "cd ./application/sys && npm install",
    "install:assets": "cd ./application/assets && npm install",
    "install:baby": "cd ./application/baby && npm install",
    "serve": "npm-run-all --parallel start:*",
    "start:main": "cd ./main && npm run dev",
    "start:sys": "cd ./application/sys && npm run dev",
    "start:assets": "cd ./application/assets && npm run dev",
    "start:baby": "cd ./application/baby && npm run dev",
    "build": "npm-run-all --parallel build:*",
    "build:main": "cd ./main && npm run build",
    "build:sys": "cd ./application/sys && npm run build",
    "build:assets": "cd ./application/assets && npm run build",
    "build:baby": "cd ./application/baby && npm run build"
  },
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}