真是受夠開多個終端機執行多個指令了！來用 concurrently 吧

前言

隨著手上負責的專案越來越多，我也開始需要同時開啟多個終端機視窗來執行不同的指令，例如前端專案的開發伺服器、後端 API 伺服器、資料庫服務等等。每次都要手動開啟多個終端機視窗並輸入指令，實在是非常麻煩且浪費時間，所以這一篇來介紹一下 concurrently 這個工具。

concurrently 是什麼？

簡單來說，它是一個能讓你「平行」執行多個指令的工具。

很多人會嘗試使用 watch-js && watch-css，但這其實是序列執行（Sequential），必須等前一個指令完成（結束進程）後，才會跑下一個，像 watch 類型或開發伺服器的指令是永遠不會結束的，這導致後面的指令被阻塞，你只好乖乖開好幾個終端機視窗來執行這些指令。

那為了解決這件事情變成打開一個專案就要開數個終端機視窗，以我曾經接手的專案中，就有開啟這幾個指令的需求：

• npm run dev:backend：後端 API 伺服器
• npm run dev:ejs：前端 EJS 模板伺服器
• npm run watch:styles：監聽 CSS 檔案變化
• npm run watch:scripts：監聽 JavaScript 檔案變化
• npm run db:server：資料庫服務

雖然前端的部分可以直接改用 Webpack 、Vite、Gulp 這些工具來同時監聽這些檔案變化，但是後端跟資料庫相關卻還是沒有辦法整合進去，所以還是需要開啟多個終端機視窗來執行這些指令。

因此至少至少還是會需要開啟三個終端機視窗（npm run dev:backend、npm run dev:frontend、npm run db:server）來執行這些指令，這樣就會讓我覺得非常麻煩且浪費時間，所以這邊就要來介紹 concurrently 這個工具。

而 concurrently 重點就是讓你可以一個終端機視窗中，同時執行多個指令，並且可以自動管理這些指令的輸出，讓你可以輕鬆地看到每個指令的執行狀態。

concurrently 怎麼用？

使用方式非常的簡單，這邊我會非常建議直接安裝進去你的專案中，這樣就可以直接在 package.json 中的 scripts 區塊中使用，儘管官方有提供全域安裝的方式，不過我個人還是比較建議安裝在專案中，這樣可以確保每個專案使用的版本是一致的。

1
2
3
4
5
6
7
8

# npm
npm install concurrently --save-dev

# yarn
yarn add concurrently --dev

# pnpm
pnpm add concurrently --save-dev

安裝完畢後，打開你的 package.json 檔案，在 scripts 區塊中加入一個新的指令，例如：

1
2
3
4
5
6

"scripts": {
  "dev:all": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\" \"npm run db:server\"",
  "dev:frontend": "webpack serve",
  "dev:backend": "node server.js",
  "dev:db": "mongod --dbpath ./data/db"
}

這樣你就可以透過 npm run dev:all 來同時執行這三個指令，並且可以在同一個終端機視窗中看到這三個指令的輸出。

使用萬用字元簡化指令

如果你的 scripts 命名很有規律，可以進一步簡化：

1
2
3
4
5
6

"scripts": {
  "dev:all": "concurrently \"npm run dev:*\"",
  "dev:frontend": "webpack serve",
  "dev:backend": "node server.js",
  "dev:db": "mongod --dbpath ./data/db" 
}

這樣 concurrently 就會自動抓取所有以 dev: 為前綴的指令並同時執行唷。

自動結束其他指令

最後這邊介紹一個 kill-others 指令，這個指令可以讓你在其中一個指令結束（意指發生錯誤）時，自動結束其他指令

1
2
3
4
5
6

"scripts": {
  "dev:all": "concurrently \"npm run dev:*\"",
  "dev:frontend": "webpack serve",
  "dev:backend": "node server.js",
  "dev:db": "mongod --dbpath ./data/db" 
}

當然你還可以高度客製化這些指令的輸出方式，這部份我就不詳細介紹了，我認為你可以直接參考官方文件：concurrently。