關(guān)于Create React App不得不談的事與如何升級(jí)React 18
前言
身為React的堅(jiān)定擁護(hù)者，筆者一直使用create-react-app（簡(jiǎn)稱CRA）和customize-cra來(lái)搭建項(xiàng)目。最近的一次經(jīng)歷讓我開(kāi)始思考我們真正需要的React開(kāi)發(fā)環(huán)境是什么樣的。什么是CRA？
關(guān)于customize-cra的思考
當(dāng)我們想要對(duì)CRA進(jìn)行更多擴(kuò)展而又不能直接eject時(shí)，customize-cra似乎是一個(gè)不錯(cuò)的解決方案。這也需要我們配置額外的文件如config-overrides，這在一定程度上違背了零配置的初心。理想的開(kāi)發(fā)環(huán)境
那么，站在一個(gè)React初級(jí)開(kāi)發(fā)者的角度上，我們希望的項(xiàng)目應(yīng)該是什么樣的呢？我們希望項(xiàng)目從一開(kāi)始就具備最佳的性能優(yōu)化、分包處理和CDN支持，并且能夠隨時(shí)擁抱最新的React技術(shù)。 為此，我開(kāi)始探索自己的腳本替換方案，基于以上需求進(jìn)行定制開(kāi)發(fā)。Eject與Lemon Scripts的誕生
我拉取了最新的CRA項(xiàng)目并進(jìn)行eject操作，從而獲得最原始的CRA項(xiàng)目Webpack配置。然后，在此基礎(chǔ)上我新建了GitHub和npm項(xiàng)目——Lemon Scripts。 Lemon Scripts基于eject出來(lái)的代碼進(jìn)行自定義開(kāi)發(fā)，旨在提供一個(gè)更加工程化的React開(kāi)發(fā)環(huán)境，特別適用于生產(chǎn)環(huán)境。它不僅支持移動(dòng)端適配，而且已經(jīng)內(nèi)置了對(duì)React 18的支持。如何使用Lemon Scripts
如果你是初學(xué)者并且正在考慮搭建新項(xiàng)目，Lemon推薦你使用集成的Lemon React App。這是一個(gè)已經(jīng)集成了Lemon Scripts的React應(yīng)用模板，面向生產(chǎn)環(huán)境更加工程化。一、引言
如果你已經(jīng)擁有了一個(gè)現(xiàn)成的React項(xiàng)目，那么Lemon-Scripts可以幫助你提升開(kāi)發(fā)效率。通過(guò)簡(jiǎn)單的配置，你就可以使用Lemon-Scripts來(lái)管理你的React項(xiàng)目。
二、配置與使用
在項(xiàng)目的根目錄下，通過(guò)yarn安裝Lemon-Scripts：
```bash
yarn add lemon-scripts
```
然后在package.json的scripts字段中添加以下腳本命令：
```json
"scripts": {
"start": "lemon-scripts start",
"build": "lemon-scripts build",
"analyze": "lemon-scripts build --analyze"
}
```
這樣，你就可以使用這些命令來(lái)啟動(dòng)、構(gòu)建和分析你的React項(xiàng)目了。
三、關(guān)于Lemon-Scripts的特點(diǎn)
Lemon-Scripts是基于Create React App（CRA）的內(nèi)置react-scripts進(jìn)行功能性擴(kuò)展的工具。它的目標(biāo)是讓React開(kāi)發(fā)者開(kāi)箱即用，并提供極致的打包性能優(yōu)化。它不僅支持CRA的所有配置和能力，還提供了以下擴(kuò)展功能：
原生支持Less樣式表語(yǔ)言
原生支持SVG的兩種引入方式（file url / Component）
原生支持多個(gè)React生態(tài)包的CDN打包，使bundle中只有你的業(yè)務(wù)代碼
原生支持移動(dòng)端H5適配
原生支持Webpack Analyze，幫助你掌握項(xiàng)目的詳細(xì)構(gòu)成
原生支持alias resolve，與ts paths無(wú)縫結(jié)合
同時(shí)支持多頁(yè)和單頁(yè)應(yīng)用
四、改造工程以適應(yīng)生產(chǎn)環(huán)境
基于Lemon-Scripts，我們可以改造React項(xiàng)目工程，使其更加面向生產(chǎn)環(huán)境。對(duì)于初級(jí)開(kāi)發(fā)者來(lái)說(shuō)，這可以降低項(xiàng)目上手難度。例如，通過(guò)支持Less、優(yōu)化SVG引入方式、分包和CDN等手段，我們可以提高項(xiàng)目的開(kāi)發(fā)效率和構(gòu)建速度。
五、文檔與支持
關(guān)于如何使用和支持Lemon-Scripts的各種功能，我們提供了詳細(xì)的文檔。如果你在使用過(guò)程中遇到問(wèn)題，歡迎提issue，我們會(huì)盡快為你解決。
支持Less：通過(guò)替換SCSS正則，并引入less-loader來(lái)實(shí)現(xiàn)。注意原CRA不支持Less。
支持SVG導(dǎo)入：例如，可以從'@/images/logo.svg'導(dǎo)入Logo，然后在項(xiàng)目中以或
分包與CDN：在Lemon-Scripts中，我們提前將一些穩(wěn)定的庫(kù)抽離成CDN依賴，如react、react-dom等。這樣，你的bundle將主要包含你的業(yè)務(wù)代碼，提高構(gòu)建速度和打包效率。
一、CDN配置與替換
如果你不需要默認(rèn)的CDN服務(wù)，可以在`package.json`中進(jìn)行配置替換。以下是具體的配置方法：
替換CDN模塊: 如果你想要更換默認(rèn)的CDN模塊，例如將React的CDN路徑替換為自定義的，可以如此設(shè)置：
`
CDN模塊配置
`在`package.json`中添加以下配置來(lái)替換默認(rèn)的CDN模塊：
```json
"cdnModules": [
{
"name": "react",
"path": "react.min.js"
}
]
```
自定義CDN源路徑: 如果你希望使用自己的CDN服務(wù)，可以在`package.json`中指定自定義的CDN源路徑。例如：
`
自定義CDN源路徑設(shè)置
`在`package.json`中添加或修改以下字段來(lái)設(shè)置自定義CDN源路徑：
```json
"cdnSourcePaths": "" // 根據(jù)實(shí)際需求填寫你的CDN源路徑
```
二、移動(dòng)端H5適配
若你的項(xiàng)目需要適配移動(dòng)端H5，可以在`package.json`中設(shè)置設(shè)計(jì)尺寸。內(nèi)置的px2rem-loader將自動(dòng)根據(jù)設(shè)計(jì)尺寸進(jìn)行適配。例如，你可以設(shè)置設(shè)計(jì)尺寸為375、750或其他你需要的尺寸。
`
移動(dòng)端H5設(shè)計(jì)尺寸設(shè)置
`在`package.json`中添加或修改以下字段來(lái)設(shè)置設(shè)計(jì)尺寸：
```json
"designSize": 375 // 設(shè)置你的設(shè)計(jì)尺寸
```
三、Webpack分析功能
`lemonscripts`內(nèi)置了`webpackanalyzeplugin`。要開(kāi)啟分析功能，只需在命令行中加入`--analyze`即可。這將幫助你更好地理解Webpack的配置和性能。
`
開(kāi)啟Webpack分析功能
`使用命令行參數(shù)`--analyze`來(lái)開(kāi)啟Webpack的分析功能。
四、Alias解析
在`lemon-scripts`中，為了支持TypeScript項(xiàng)目，自動(dòng)從`tsconfig.paths.json`讀取alias配置。這意味著，只要你的模塊路徑在`tsconfig.paths.json`中定義，你就可以通過(guò)alias在`lemon-scripts`項(xiàng)目中找到它。這對(duì)于使用TypeScript和自定義CRA的同學(xué)來(lái)說(shuō)非常便利。
`
Alias解析與TypeScript集成
`查看你的`tsconfig.paths.json`配置，確保你的模塊路徑正確設(shè)置，以便通過(guò)alias在`lemon-scripts`項(xiàng)目中找到它們。
五、多頁(yè)與單頁(yè)模式
若你的項(xiàng)目需要多頁(yè)面模式，可以在`package.json`中設(shè)置`multiPage`為`true`。這將使`lemon-scripts`從根目錄下的`src/pages/`中找到所有的pages模塊進(jìn)行打包開(kāi)發(fā)。
`
多頁(yè)與單頁(yè)模式設(shè)置
`在`package.json`中添加或修改以下字段來(lái)開(kāi)啟多頁(yè)面模式：
```json
"multiPage": true // 設(shè)置為true開(kāi)啟多頁(yè)面模式
```
關(guān)于`lemon-scripts`和`lemon-react-app`的詳細(xì)信息，你可以點(diǎn)擊以下鏈接查看詳細(xì)文檔。 如有疑問(wèn)，可以查看其官方文檔或原始的create-react-app文檔以獲取更多支持。 兩者都是基于React的優(yōu)秀工具，讓開(kāi)發(fā)者更輕松地構(gòu)建和管理React應(yīng)用。 尤其是對(duì)于那些剛開(kāi)始接觸React的開(kāi)發(fā)者來(lái)說(shuō)，它們提供了無(wú)需深入了解Webpack的便捷方式。由于`lemon-scripts`是基于create-react-app擴(kuò)展的，所以它能夠兼容大部分create-react-app的功能和支持。無(wú)論是create-react-app 4還是5，它們都在不斷地改進(jìn)和優(yōu)化，為開(kāi)發(fā)者提供更好的開(kāi)發(fā)體驗(yàn)。如有更多疑問(wèn)和需求，歡迎查閱官方文檔或參與社區(qū)討論。希望這些工具能夠幫助你在React開(kāi)發(fā)路上走得更遠(yuǎn)！更多關(guān)于create-react-app 4和5的區(qū)別將在下文詳細(xì)闡述。兩者之間的主要區(qū)別在于支持的React版本不同。create-react-app 4主要支持React 16.x版本，而create-react-app 5則支持React 17及以上版本。這意味著如果你在使用新的React特性或庫(kù)時(shí)遇到問(wèn)題，可能需要考慮升級(jí)到更高版本的create-react-app以獲得更好的兼容性和支持。隨著版本的迭代更新，create-react-app也在不斷引入新的特性和優(yōu)化性能以更好地滿足開(kāi)發(fā)者的需求。了解不同版本之間的差異并根據(jù)項(xiàng)目需求選擇合適的版本是非常重要的。create-react-app 5.0的新特性與手機(jī)應(yīng)用開(kāi)發(fā)工具的演變
一、create-react-app 5.0的新增腳本命令與Webpack升級(jí)
在最新版本的create-react-app 5.0中，新增了一系列腳本命令，如npm start--inspect-brk，這些命令為開(kāi)發(fā)者提供了更為便利的調(diào)試應(yīng)用程序的體驗(yàn)。相較于之前的create-react-app 4.0版本，它默認(rèn)使用了Webpack 5，相較于Webpack 4，帶來(lái)了更高效和優(yōu)化的構(gòu)建性能。
二、開(kāi)發(fā)手機(jī)app主要使用的編程軟件介紹
隨著移動(dòng)應(yīng)用的飛速發(fā)展，開(kāi)發(fā)手機(jī)app的編程軟件也日新月異。目前，Android Studio和Xcode是開(kāi)發(fā)Android和iOS應(yīng)用的主要環(huán)境。
三、Android Studio：Android開(kāi)發(fā)的強(qiáng)大工具
Android Studio是Google推出的官方Android開(kāi)發(fā)環(huán)境，包含了開(kāi)發(fā)Android應(yīng)用所需的一切工具。它支持Java和Kotlin兩種編程語(yǔ)言，并具備強(qiáng)大的代碼編輯器和調(diào)試工具。它還集成了豐富的Android SDK和模擬器，使得開(kāi)發(fā)者可以在不同版本的Android系統(tǒng)上進(jìn)行測(cè)試和調(diào)試。
四、Xcode：iOS開(kāi)發(fā)的首選工具
對(duì)于iOS應(yīng)用開(kāi)發(fā)，Xcode是不二之選。Xcode是蘋果公司推出的開(kāi)發(fā)工具套件，用于開(kāi)發(fā)Mac OS和iOS應(yīng)用程序。它主要使用Swift和Objective-C作為編程語(yǔ)言，提供了強(qiáng)大的代碼編輯器、調(diào)試工具以及各種庫(kù)和框架。特別是在界面設(shè)計(jì)和交互體驗(yàn)方面，Xcode的Interface Builder和Storyboard功能非常出色。
五、跨平臺(tái)開(kāi)發(fā)工具的發(fā)展與挑戰(zhàn)
除了原生的開(kāi)發(fā)環(huán)境如Android Studio和Xcode，還有一些跨平臺(tái)的開(kāi)發(fā)工具如React Native、Flutter等也受到了廣泛關(guān)注。這些工具允許開(kāi)發(fā)者使用同一套代碼同時(shí)開(kāi)發(fā)Android和iOS應(yīng)用，提高了開(kāi)發(fā)效率和代碼復(fù)用性。這些跨平臺(tái)工具在性能和原生體驗(yàn)上可能存在一定的局限，因此在實(shí)際應(yīng)用中需要權(quán)衡利弊。
選擇哪種編程軟件主要取決于目標(biāo)平臺(tái)。開(kāi)發(fā)者可以根據(jù)自身的需求和經(jīng)驗(yàn)，選擇最適合自己的編程軟件。隨著技術(shù)的不斷發(fā)展，這些編程軟件也在不斷更新和完善，為開(kāi)發(fā)者帶來(lái)更好的開(kāi)發(fā)體驗(yàn)。
