由于 React 19 兼容性問題,Create React App 正式棄用
Hello,大家好,我是 Sunday。
前段時間 React 19 正式發(fā)布 帶來了一系列的新功能。這些新功能大家用起來很爽,但是也帶來了一些新的生態(tài)問題。其中比較關(guān)鍵的就是 create-react-app(簡稱 CRA) 不能用啦...
因為 CRA 默認安裝 React 的最新可用版本,這也就意味著在 React 19 發(fā)布后它會安裝 React 19。但是 CRA 的默認模板包括 React Testing Library v13,它需要 React 18,而不是 React 19。
當(dāng) npm 檢測到這種不匹配時,它會拋出一個錯誤,導(dǎo)致項目無法正確設(shè)置。
針對這個問題,Redux 的作者 Mark Erikson 在最近的 GitHub 問題中詳細說明了這種不兼容的問題(https://github.com/facebook/create-react-app/issues/17004):
圖片
雖然基于此,Mark Erikson 提供了 臨時解決方案,但是這并不能解決長期的問題:
圖片
因此,我們就得出了一個結(jié)論 CRA 已經(jīng)過時了!
CRA 已經(jīng)過時了
然后 CRA 已經(jīng)很多年沒有人進行維護了
圖片
但是,從 npm 的下載統(tǒng)計中,依然可以看出它依然是 React 開發(fā)者的常用工具
圖片
同時,在國內(nèi)的很多教程中,也都是使用 CRA 進行項目構(gòu)建的。
所以,這樣的問題,就必須要提供對應(yīng)的 解決方案。
而 React 官方團隊也給出了對應(yīng)的解決方案,那就是 棄用...
截圖來自 github create-react-app 倉庫 README
截圖來自 github create-react-app 倉庫 README
而作為替代,目前更推薦大家使用 vite 來創(chuàng)建 React 項目。
基于 Vite 的遷移方案
- 卸載 CRA 依賴
npm uninstall react-scripts
npm install vite @vitejs/plugin-react --save-dev
- 調(diào)整項目結(jié)構(gòu)
將 index.html 移至項目根目錄,并更新腳本引用為 ESM 格式:
<script type="module" src="/src/main.jsx"></script>
將 .js 文件擴展名改為 .jsx(如 App.js → App.jsx)。
- 配置 Vite
創(chuàng)建 vite.config.js 文件:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});
- 更新環(huán)境變量
環(huán)境變量前綴需從 REACT_APP_ 改為 VITE_(如 VITE_API_KEY=123)。
- 運行與調(diào)試
修改 package.json 腳本命令:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}