【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"