資訊專欄INFORMATION COLUMN
摘要：關于前端工具對于，有官方的。所以我們使用了和類似的解決方案，創建自己團隊專屬的前端工具，這也是我們當前的解決方案。我推薦的方案回到文章的標題打造前端團隊工具，我認為每個前端團隊都應該有自己的工具，這是一個團隊技術和經驗沉淀的重要根據地。
關于前端 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。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104112.html
摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要：正式發布已正式發布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內容包括什么是內存，內存生命周期，中的內存分配，內存釋放，垃圾收集，種常見的內存泄漏以及如何處理內存泄漏的技巧。 1. Angular 6 正式發布 Angular 6.0.0 已正式發布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統一整體框架、Material ...
摘要：正式發布已正式發布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內容包括什么是內存，內存生命周期，中的內存分配，內存釋放，垃圾收集，種常見的內存泄漏以及如何處理內存泄漏的技巧。 1. Angular 6 正式發布 Angular 6.0.0 已正式發布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統一整體框架、Material ...
摘要：正式發布已正式發布，新版本重點關注工具鏈以及工具鏈在中的運行速度問題。文章內容包括什么是內存，內存生命周期，中的內存分配，內存釋放，垃圾收集，種常見的內存泄漏以及如何處理內存泄漏的技巧。 1. Angular 6 正式發布 Angular 6.0.0 已正式發布，新版本重點關注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統一整體框架、Material ...
閱讀 2786·2021-11-22 14:45
閱讀 2925·2021-09-10 11:26
閱讀 3231·2021-09-07 10:18
閱讀 2219·2019-08-30 14:08
閱讀 617·2019-08-29 12:22
閱讀 1393·2019-08-26 13:48
閱讀 2535·2019-08-26 10:24
閱讀 1150·2019-08-23 18:35
