从 Create React App (CRA) 迁移到 Vite
1. 安装依赖
npm install vite @vitejs/plugin-react --save-dev
2. 卸载 create-react-app 依赖
npm uninstall react-scripts
3. 调整 package.json 文件
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},
4. 将所有使用 JSX 的文件扩展名从".js”重命名为".jsx”
因为 Vite 对文件扩展名是明确的。如果您使用的是 TypeScript，请执行从".ts“到".tsx”的相同任务。下面用命令行下的App.js文件进行演示。
mv src/App.js src/App.jsx
mv src/index.js src/index.jsx
如果您没有以这种方式重命名所有 React/JsX 相关文件(基本上所有使用尖括号的文件)，您可能会收到以下或类似的错误：
- 目前未启用 JSX 语法扩展
- 该文件的 esbuild 加载器当前设置为"js”，但必须设置为"jsx"才能解析 JSX语法。您可以使用"loader:{'js':jsx’}”来执行此操作。
5. 在根目录下创建 vite.config.js 文件
touch vite.config.js
并向其中添加以下实现细节。本质上，我们希望为构建保留与之前使用 create-react-app 相同的输出目录。另外，我们要使用Vite的React Plugin：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [react()],
};
});
6. 将 public/index.html 移动到项目的根文件夹中，因为 Vite 需要它在那里
mv public/index.html .
然后，删除 index.html 文件中出现的所有%PUBLIC URL%
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />
<!-- do this for all occurrences -->
最后，按以下方式链接 移动的 index.html 文件中的src/index.js 文件
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
就是这样。如果您一直在使用 create-react-app 项目而没有任何进一步的配置(例如全新的 create- react-app 安装)，那么您就可以使用 npm start 启动新的基于 Vite 的 React 应用程序。
注意：
- nodejs版本建议：^20.18.1（否则出现错误 SyntaxError: Cannot use import statement outside a module）
