一、create-react-app深度探討及react18升級之路
前言
身為React的堅定擁護(hù)者，我一直使用create-react-app（簡稱CRA）與customize-cra來構(gòu)建項目。在最近升級react-scripts和react18的過程中，我遇到了不少挑戰(zhàn)。超過20個錯誤使得項目無法正常運行，解決這些問題耗費了我大量時間和精力。更令我煩惱的是，我的移動端項目的px2rem功能也失效了。這引發(fā)了我對理想React開發(fā)環(huán)境的思考。
一、關(guān)于CRA
對于React開發(fā)者而言，如何快速搭建一個友好、可靠且自帶性能優(yōu)化的環(huán)境是一個重要問題。CRA的出現(xiàn)在一定程度上解決了這個問題，但它提供的開發(fā)環(huán)境相對簡陋。雖然CRA提供了許多配置，但在實際生產(chǎn)環(huán)境中，我們往往需要進(jìn)行更多的webpack配置調(diào)整。例如，初始化的CRA項目不支持less，需要我們自行添加less-loader。
二、關(guān)于customize-cra
當(dāng)我們希望對CRA進(jìn)行更多擴(kuò)展而又不能直接eject時，customize-cra是目前的一個解決方案。它也會引入config-overrides等配置文件，這在一定程度上背離了CRA零配置的初衷。使用customize-cra仍然會使我們陷入熟悉webpack的繁瑣之中。
三、理想的開發(fā)環(huán)境應(yīng)該是什么樣的？
站在一個React初級開發(fā)者的角度，我希望我的項目能在生產(chǎn)環(huán)境中穩(wěn)定運行，無需擔(dān)心webpack配置。這個項目從誕生起就應(yīng)具備最佳的性能優(yōu)化、分包和CDN支持，并且能夠隨時擁抱新技術(shù)和最新的React版本。
四、我的解決方案
基于以上思考，我開始探索用自定義的scripts替換cra自帶的scripts。具體操作步驟如下：
我拉取了最新的CRA項目并進(jìn)行了eject操作，以獲得最原始的CRA項目webpack配置。然后，我創(chuàng)建了一個名為lemon-scripts的GitHub項目和npm包，基于eject出來的代碼進(jìn)行了一些自定義開發(fā)。
五、如何使用lemon-scripts？
如果你是初學(xué)者并且正在考慮構(gòu)建項目，我推薦你使用我已經(jīng)集成了lemon-scripts的reactapp——lemon-react-app。此項目配置更加工程化，面向生產(chǎn)環(huán)境。它支持移動端適配，對于H5項目可直接上手，并且已經(jīng)兼容了react18。
一、引言
如果你已經(jīng)擁有一個現(xiàn)成的React項目，并希望進(jìn)一步提升其開發(fā)效率和打包性能，`lemon-scripts`或許能為你帶來不小的幫助?；赻create-react-app`（CRA）內(nèi)置的`react-scripts`，`lemon-scripts`提供了一系列功能性擴(kuò)展，旨在讓React開發(fā)者開箱即用，并享受極致的打包性能優(yōu)化。
二、安裝與配置
若你正在使用CRA，直接安裝`lemon-scripts`即可。它在很多方面為開發(fā)者提供了CRA所沒有的支持。通過簡單的配置，你可以輕松集成`lemon-scripts`到你的項目中。
在`package.json`的`scripts`字段中，你可以這樣配置：
```json
"scripts": {
"start": "lemon-scripts start",
"build": "lemon-scripts build",
"analyze": "lemon-scripts build --analyze"
}
```
三. lemon-scripts的特色功能
`lemon-scripts`提供了許多實用的功能，幫助開發(fā)者解決日常痛點：
1. 原生支持Less樣式表：告別了SCSS，擁抱Less，讓樣式編寫更加得心應(yīng)手。
2. SVG兩種引入方式：文件路徑（file）或URL/組件（Component）方式，更加靈活。
3. 支持多個React生態(tài)包的CDN打包：將穩(wěn)定的庫分離成CDN資源，提升構(gòu)建速度和打包效率。你的bundle里只有你的業(yè)務(wù)代碼。
4. 原生支持移動端H5適配：一鍵適配不同移動設(shè)備屏幕，無需額外配置。
5. 原生支持Webpack Analyze：隨時掌握項目細(xì)節(jié)，優(yōu)化性能。
6. 原生支持alias resolve：無縫結(jié)合ts paths，解決模塊路徑問題。
7. 同時支持多頁和單頁應(yīng)用：滿足不同項目需求，靈活構(gòu)建應(yīng)用架構(gòu)。
以及其他更多實用功能...
四、基于lemon-scripts的改造工程
對于希望更加面向生產(chǎn)環(huán)境的CRA項目，基于`lemon-scripts`可以進(jìn)行進(jìn)一步的改造。通過改造整個工程，可以使其更加貼合生產(chǎn)需求，為開發(fā)者提供更加便捷的開發(fā)體驗。在這方面，`lemon-react-app`是一個很好的例子。它基于`lemon-scripts`，改造了整個工程以更加面向生產(chǎn)環(huán)境。
五、文檔與支持
對于使用中的疑問和問題，你可以查看官方文檔獲取支持。以下是關(guān)于部分功能的詳細(xì)說明：
支持Less樣式表：通過引入less-loader替換原有的SCSS支持，讓你的樣式編寫更加靈活。
支持SVG導(dǎo)入：可以輕松地從項目中導(dǎo)入SVG圖標(biāo)，使用``或`
分包與CDN：通過提前將一些穩(wěn)定的庫抽離為CDN依賴，如react、react-router等，提高構(gòu)建速度和打包效率，提供一個完全純凈的環(huán)境供開發(fā)者使用。
無論你是初級開發(fā)者還是資深工程師，`lemon-scripts`都能為你帶來便捷和高效的開發(fā)體驗。嘗試使用它，讓你的React項目更上一層樓！
一、配置與使用CDN模塊
如果你不需要默認(rèn)的CDN模塊，可以在你的項目中的package.json文件中進(jìn)行個性化配置。 例如，如果你想替換默認(rèn)的CDN模塊為七牛云CDN服務(wù)，可以這樣設(shè)置： "cdnModules": [{name:'react', path:'react.min.js'}] 這意味著，當(dāng)項目需要加載React模塊時，將會從七牛云CDN服務(wù)中獲取對應(yīng)的資源。二、移動端H5適配與Webpack分析
對于移動端H5的開發(fā)需求，你可以通過設(shè)置設(shè)計尺寸在package.json中來達(dá)到適配的目的。 "designSize": 375 當(dāng)你的設(shè)計尺寸為上述值時，內(nèi)置的px2rem-loader會自動轉(zhuǎn)換你的像素單位以適應(yīng)不同的移動設(shè)備。 如果你想要開啟Webpack分析功能，只需在命令行中加入特定的參數(shù)即可。三、Alias解析與多頁支持
在項目中設(shè)置alias可以簡化模塊路徑的配置。對于使用TypeScript和lemon-scripts的項目來說，我們可以直接從tsconfig.paths.json中讀取路徑信息。 tsconfig中的路徑映射配置如下： @/components/ 會自動指向 src/components/ 這種設(shè)置對于那些熟悉路徑別名概念的前端開發(fā)者來說非常友好。 如果你需要在項目中支持多頁開發(fā)模式，可以在package.json中設(shè)置： "multiPage": true 這將啟動多頁面模式，并從根目錄下的src/pages中找到所有的pages模塊進(jìn)行打包開發(fā)。四、關(guān)于Lemon-Scripts的詳細(xì)介紹
一、靈活配置CDN模塊
你是否覺得默認(rèn)的CDN服務(wù)不太符合你的需求？沒問題，檸檬創(chuàng)建工程“mydemopro”并集成antd UI框架
一、新建工程并集成antd UI
在開始我們的React前端工程之前，首先需要創(chuàng)建一個新的項目并集成antd UI框架。在d:路徑下建立目錄，進(jìn)入該目錄并使用相應(yīng)的命令進(jìn)行操作?？梢允褂脛?chuàng)建命令新建工程“mydemopro”，并在項目配置中增加antd作為UI支持。這樣，我們的項目就準(zhǔn)備好了，接下來可以進(jìn)行開發(fā)。
二、啟動前端工程并確認(rèn)環(huán)境
通過特定的命令啟動我們的前端工程，并確保在指定的目錄中運行。啟動后，檢查環(huán)境是否成功搭建，為后續(xù)的開發(fā)工作做好準(zhǔn)備。
三、理解工程目錄結(jié)構(gòu)
在React項目中，目錄結(jié)構(gòu)是非常重要的。通常，`node_modules`目錄保存了所有的依賴包，`public`目錄保存靜態(tài)資源，而`src`目錄則是項目的核心，包含了所有的源代碼。深入理解這些目錄的作用和它們之間的關(guān)系，有助于我們更好地進(jìn)行項目開發(fā)。
四、編寫前端組件與入口頁面
在`src`目錄下，我們可以開始編寫前端組件了。`public/index.html`作為入口頁面，會展示我們的React組件。在編寫組件的過程中，要注意其結(jié)構(gòu)、樣式和交互邏輯，確保最終呈現(xiàn)的效果符合預(yù)期。
五、解析入口程序與默認(rèn)頁面呈現(xiàn)
通過解析`index.tsx`這個入口程序，我們可以理解默認(rèn)頁面的呈現(xiàn)過程。在這個過程中，React和TypeScript的語法和特性將得到充分的體現(xiàn)。了解這些基礎(chǔ)知識，將有助于我們更好地進(jìn)行后續(xù)的開發(fā)工作。
三、create-react-app 4.x與5.x的區(qū)別
create-react-app是一個快速構(gòu)建React應(yīng)用的工具，它能自動生成開發(fā)環(huán)境和配置文件。從4.0版本到目前的5.x版本，它在功能和性能上都有了一些改進(jìn)。
create-react-app 4.x和5.x支持的React版本不同。create-react-app 4.x支持React 16.9及以下版本，而create-react-app 5.x則支持React 17及以上的版本。這意味著在使用新版本create-react-app創(chuàng)建項目時，可以更方便地使用最新的React特性和API。
create-react-app 5.x新增了一些腳本命令。例如npm start --inspect-brk可以用于調(diào)試應(yīng)用程序，這在開發(fā)過程中非常有用，可以幫助我們更好地定位和解決問題。
create-react-app 5.x默認(rèn)使用Webpack 5進(jìn)行模塊打包。相較于4.x使用的Webpack 4，Webpack 5在性能和功能上都有所提升。這意味著使用create-react-app 5.x創(chuàng)建的項目將具有更好的性能和更豐富的功能。了解這些區(qū)別有助于我們更好地選擇適合自己項目的工具版本，并進(jìn)行更高效的開發(fā)工作。
