打造前端團隊的 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：

安裝:

npm i -g pea-cli

初始化項目：

pea create myapp

項目目錄:

.
├── README.md
├── package.json
├── pages
│   └── index.tsx
└── tsconfig.json

啓動開發服務器：

cd myapp
npm run start

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

有興趣瞭解細節的能夠看 https://github.com/pea-team/pea-cli