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

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

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

在当前前端开发过程当中咱们通常都会使用一些脚手架工具，例如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就能结束两个服务。这就是并行前端工程。

2、安装Concurrently

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

2.1全局安装

npm install -g concurrently

2.2项目安装

npm install concurrently --save

3、用发

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

concurrently "command1 arg" "command2 arg"