使用 npm-run-all 在 Node 项目中同时运行多个命令

在开发基于 Node.js 的项目时,很多时候都需要同时运行多个 scripts 命令,用于开发或者是用于项目的打包构建。这个时候如果是在终端里多个启动就会显得特别繁琐,那么 npm-run-all 这个命令行工具就可以很方便的解决这个问题。

多个启动命令

首先来找一个项目的 scripts 配置作为示例,该项目的启动命令配置如下:

{
"dev:start": "nodemon --watch build exec node \"build/bundle.js\"",
"dev:build:client": "webpack --config webpack.config.client.js --watch",
"dev:build:server": "webpack --config webpack.config.server.js --watch"
}

这是一个基于 React 的服务器端渲染项目,可以看到要启动此项目,需要启动至少三个命令:npm run dev:start, npm run dev:build:client, dev:build:server, 那么就需要在终端里开三个窗口运行,这样做是非常麻烦的,那么下面就用 npm-run-all 来优化一下配置。

安装及使用

首先是安装,作为一个 npm 包,安装起来很方便,直接运行如下命令即可:

npm i npm-run-all --save-dev
# 或者 yarn add npm-run-all --dev

运行参数

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 就会结束掉全部的命令

改进配置

在了解了用法之后,使用起来就非常简单了,下面来对文章开头提到的 scripts 配置进行优化,我们来添加一个 "dev": "npm-run-all --parallel dev:**" 命令,改进后的配置如下:

{
"dev": "npm-run-all --parallel dev:**",
"dev:start": "nodemon --watch build exec node \"build/bundle.js\"",
"dev:build:client": "webpack --config webpack.config.client.js --watch",
"dev:build:server": "webpack --config webpack.config.server.js --watch"
}

改进之后,我们运行项目时直接执行 npm run dev 就可以了,一条命令启动了多个服务,这样就极大的简化了操作流程。

参考资料