Hello，大家好，我是 Sunday。

前段時(shí)間 React 19 正式發(fā)布 帶來(lái)了一系列的新功能。這些新功能大家用起來(lái)很爽，但是也帶來(lái)了一些新的生態(tài)問(wèn)題。其中比較關(guān)鍵的就是 create-react-app（簡(jiǎn)稱(chēng) CRA） 不能用啦...

因?yàn)?CRA 默認(rèn)安裝 React 的最新可用版本，這也就意味著在 React 19 發(fā)布后它會(huì)安裝 React 19。但是 CRA 的默認(rèn)模板包括 React Testing Library v13，它需要 React 18，而不是 React 19。

當(dāng) npm 檢測(cè)到這種不匹配時(shí)，它會(huì)拋出一個(gè)錯(cuò)誤，導(dǎo)致項(xiàng)目無(wú)法正確設(shè)置。

針對(duì)這個(gè)問(wèn)題，Redux 的作者 Mark Erikson 在最近的 GitHub 問(wèn)題中詳細(xì)說(shuō)明了這種不兼容的問(wèn)題（https://github.com/facebook/create-react-app/issues/17004）：

圖片

雖然基于此，Mark Erikson 提供了 臨時(shí)解決方案，但是這并不能解決長(zhǎng)期的問(wèn)題：

圖片

因此，我們就得出了一個(gè)結(jié)論 CRA 已經(jīng)過(guò)時(shí)了！

CRA 已經(jīng)過(guò)時(shí)了

然后 CRA 已經(jīng)很多年沒(méi)有人進(jìn)行維護(hù)了

圖片

但是，從 npm 的下載統(tǒng)計(jì)中，依然可以看出它依然是 React 開(kāi)發(fā)者的常用工具

圖片

同時(shí)，在國(guó)內(nèi)的很多教程中，也都是使用 CRA 進(jìn)行項(xiàng)目構(gòu)建的。

所以，這樣的問(wèn)題，就必須要提供對(duì)應(yīng)的 解決方案。

而 React 官方團(tuán)隊(duì)也給出了對(duì)應(yīng)的解決方案，那就是 棄用...

截圖來(lái)自 github create-react-app 倉(cāng)庫(kù) README

截圖來(lái)自 github create-react-app 倉(cāng)庫(kù) README

而作為替代，目前更推薦大家使用 vite 來(lái)創(chuàng)建 React 項(xiàng)目。

基于 Vite 的遷移方案

1. 卸載 CRA 依賴(lài)

npm uninstall react-scripts
npm install vite @vitejs/plugin-react --save-dev

2. 調(diào)整項(xiàng)目結(jié)構(gòu)

將 index.html 移至項(xiàng)目根目錄，并更新腳本引用為 ESM 格式：

<script type="module" src="/src/main.jsx"></script>

將 .js 文件擴(kuò)展名改為 .jsx（如 App.js → App.jsx）。

3. 配置 Vite

創(chuàng)建 vite.config.js 文件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

4. 更新環(huán)境變量

環(huán)境變量前綴需從 REACT_APP_ 改為 VITE_（如 VITE_API_KEY=123）。

5. 運(yùn)行與調(diào)試

修改 package.json 腳本命令：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}