打造前端團隊的 React CLI 工具

關於前端 CLI 工具

• 對於 Angular，有官方的 Angular CLI。
• 對於 Vue，有官方的 Vue CLI。
• 對於 React，有官方的 Create React App。

Angular CLI 和 Vue CLI 是官方推薦的 CLI 工具，可直接在生產環境中使用，但 Create React App 的定位卻有點不同，它的目標是讓你快速 Set up 一個 React 應用，如果你要在生產環境中使用，因為它的可定製性並不好，你可能要 eject，然後手動維護 webpack 配置。

我們團隊的歷程

首先說背景，這幾年以來，我所在的團隊使用的都是 React 技術棧，我們的業務屬性是要頻繁建立新專案的，但業務的生命週期並不一定短，也可能是長期的。

最開始，應該該是三四年前左右，那時的解決方案比較原始，每個人維護自己的 webpack 配置，有新專案就 copy and paste。這樣的優點是靈活，本人對自己專案的配置可控性，缺點是配置升級和維護都不容易，專案交接後問題多。

後來，我們使用專案 Boilerplate 的方式，團隊內維護一份 Boilerplate，所有新專案都使用這個 Boilerplate 初始化。這樣的優點是 webpack 配置統一化，易於多人合作，缺點是配置升級不容易，因為 webpack 配置是暴露在專案中的，配置會被人修改，很容易髒掉。

再後來，官方出了 Create React App。發現原來 webpack 配置可以不暴露在專案中，可以隱藏在 node_modules 中，這是一種非常優雅的解決方案。所以我們使用了和 Create React App 類似的解決方案，建立自己團隊專屬的前端 CLI 工具，這也是我們當前的解決方案。這樣的優點是 webpack 配置被隱藏，專案目錄比較乾淨，webpack 配置升級容易，只需升級 CLI，缺點是維護 CLI 是一個大工程，需要較多的人力，且需要踩非常多的坑。

我推薦的方案

回到文章的標題：打造前端團隊 React CLI 工具，我認為每個前端團隊都應該有自己的 CLI 工具，這是一個團隊技術和經驗沉澱的重要根據地。

CLI 工具可以承擔非常多的工作，比如初始化專案、開發、測試、打包、部署、元件開發等，換一句話說，CLI 工具可以參與到研發的整個生命週期中，所以它是團隊技術和經驗沉澱的重要根據地。

這裡重點要講的是 CLI 所承擔的腳手架功能，Create React App 非常優秀，但我不建議作為團隊工具直接使用，我也不建議從零開始去實現一個 Create React App（特別是一箇中小前端團隊），我的建議是基於 Create React App 建立，為什麼呢？因為 Create React App 足夠問題，出現問題的概率小，站在巨人肩膀上，你可以省很多精力，把更多的精力投入到業務問題中。

基於 Create React App 建立 CLI

下面是一個我基於 Create React App 建立的 CLI：

安裝:

yarn global add dahlia-cli
複製程式碼

初始化專案：

dh new myapp
複製程式碼

專案目錄:

.
├── README.md
├── package.json
├── pages
│   └── index.tsx
└── tsconfig.json
複製程式碼

啟動開發伺服器：

cd myapp
dh start
複製程式碼

原理是非常簡單，其實就是對 Create React App 定製化，讓它成為適合你團隊的工具，但你工具是緊跟 React 社群的，擁有很好的穩定性。

有興趣瞭解細節的可以看 dahlia-cli。