成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

打造前端團隊的 React CLI 工具

Scott / 3371人閱讀

摘要：關(guān)于前端工具對于，有官方的。所以我們使用了和類似的解決方案，創(chuàng)建自己團隊專屬的前端工具，這也是我們當前的解決方案。我推薦的方案回到文章的標題打造前端團隊工具，我認為每個前端團隊都應(yīng)該有自己的工具，這是一個團隊技術(shù)和經(jīng)驗沉淀的重要根據(jù)地。

關(guān)于前端 CLI 工具

對于 Angular，有官方的 Angular CLI。

對于 Vue，有官方的 Vue CLI。

對于 React，有官方的 Create React App。

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

我們團隊的歷程

首先說背景，這幾年以來，我所在的團隊使用的都是 React 技術(shù)棧，我們的業(yè)務(wù)屬性是要頻繁創(chuàng)建新項目的，但業(yè)務(wù)的生命周期并不一定短，也可能是長期的。

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

后來，我們使用項目 Boilerplate 的方式，團隊內(nèi)維護一份 Boilerplate，所有新項目都使用這個 Boilerplate 初始化。這樣的優(yōu)點是 webpack 配置統(tǒng)一化，易于多人合作，缺點是配置升級不容易，因為 webpack 配置是暴露在項目中的，配置會被人修改，很容易臟掉。

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

我推薦的方案

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

CLI 工具可以承擔非常多的工作，比如初始化項目、開發(fā)、測試、打包、部署、組件開發(fā)等，換一句話說，CLI 工具可以參與到研發(fā)的整個生命周期中，所以它是團隊技術(shù)和經(jīng)驗沉淀的重要根據(jù)地。

這里重點要講的是 CLI 所承擔的腳手架功能，Create React App 非常優(yōu)秀，但我不建議作為團隊工具直接使用，我也不建議從零開始去實現(xiàn)一個 Create React App（特別是一個中小前端團隊），我的建議是基于 Create React App 創(chuàng)建，為什么呢？因為 Create React App 足夠穩(wěn)定，出現(xiàn)問題的概率小，站在巨人肩膀上，你可以省很多精力，把更多的精力投入到業(yè)務(wù)問題中。

基于 Create React App 創(chuàng)建 CLI

下面是一個我基于 Create React App 創(chuàng)建的 CLI：

安裝:

yarn global add dahlia-cli

初始化項目：

dh new myapp

項目目錄:

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

啟動開發(fā)服務(wù)器：

cd myapp
dh start

原理是非常簡單，其實就是對 Create React App 定制化，讓它成為適合你團隊的工具，但你工具是緊跟 React 社區(qū)的，擁有很好的穩(wěn)定性。

有興趣了解細節(jié)的可以看 dahlia-cli。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104112.html

相關(guān)文章

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學習原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風格凹凸實驗室前端代碼規(guī)范風格指南這一次，徹底弄懂執(zhí)行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評論0 收藏0

  • FCC 成都社區(qū)·前端周刊 第 11 期

    摘要：正式發(fā)布已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

    lentrue 評論0 收藏0

  • FCC 成都社區(qū)·前端周刊 第 11 期

    摘要：正式發(fā)布已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

    NusterCache 評論0 收藏0

  • FCC 成都社區(qū)·前端周刊 第 11 期

    摘要：正式發(fā)布已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

    betacat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<