【concurrently】前端工程化并行解决方案

记录实际项目中用到的并行前端工程。

一、什么是并行前端工程化？

在当前前端开发过程中我们一般都会使用一些脚手架工具，例如vue-cli，在package.json中配置着一些运行命令，比如:

// package.json
"scripts": {
    "serve": "vue-cli-service serve"
}

我们可以通过npm run serve来运行我们的web工程（这里是起了一个本地服务），并可以在浏览器访问该服务。如果我们项目不只有一个web服务，我们还需要一个mock接口模拟服务（用来模拟后端接口返回数据），我们可以做如下配置：

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "mock": "cd mock && ts-node-dev mock-server.ts" // mock-server.ts是使用express搭建的node服务，ts-node-dev是加载运行.ts文件
}

我们同样可以通过npm run mock运行我们的mock服务。但是有个问题，这样我们是打开了两个Terminal,我们要结束进程就需要找到两个Terminal，分别通过Ctrl+C来结束。那我们如果更高效操作呢？这个时候我们可以这样写：

// package.json
"scripts": {
    "serve": "concurrently \"npm:mock\" \"vue-cli-service serve\"" // 使用concurrently解决方案，这里需要注意转义符的使用
    "mock": "cd mock && ts-node-dev mock-server.ts"
}

这样，当我们运行npm run serve的时候两个服务都会在同一个Terminal中运行，并且只需要在当前Terminal通过一次Ctrl+C就能结束两个服务。这就是并行前端工程。

二、安装Concurrently

这个工具是Node.js写的，可以用它运行任何命令。

2.1全局安装

npm install -g concurrently

2.2项目安装

npm install concurrently --save

三、用发

用引号将单独的命令括起来：

concurrently "command1 arg" "command2 arg"