从 Create React App 迁移到 Vite：开发人员指南

从 Create React App 迁移到 Vite：开发人员指南

嘿，开发者们！ ？

最近，我接受了将生产 React 应用程序从 Create React App (CRA) 迁移到 Vite 的挑战。结果？我们的构建时间从 3 分钟骤降到仅 20 秒！ ？

在本指南中，我将引导您完成整个迁移过程，包括有关在 JavaScript 文件中处理 JSX 的重要技巧，这可以节省您数小时的调试时间。

？为什么要切换到Vite？

在深入了解技术细节之前，让我们看看您可能想要进行此转换的原因。我们的团队看到了一些令人印象深刻的改进：

Metric	Before (CRA)	After (Vite)
Dev Server Startup	30s	2s
Hot Module Replacement	2-3s
Production Build	3 min	20s
Bundle Size	100%	85%

此外，您还可以获得这些很棒的功能：

• ⚡️ 快如闪电的 HMR
• ？开发过程中不捆绑
• ？配置更简单
• ？更好的错误消息
• ？原生 TypeScript 支持

？迁移步骤

1. 准备你的项目

首先，创建一个新分支：

git checkout -b feature/migrate-to-vite

2. 更新依赖

移除CRA并添加Vite：

# Remove CRA dependencies
npm uninstall react-scripts @craco/craco

# Install Vite and related dependencies
npm install -D vite @vitejs/plugin-react

3.配置Vite

在项目根目录创建 vite.config.js：

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

export default defineConfig({
  plugins: [
    react({
      // ? Key configuration for .js files with JSX
      include: "**/*.{jsx,js}",
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'build',
    sourcemap: true,
  },
});

重要： include: "**/*.{jsx,js}" 配置至关重要！如果没有这个，Vite 只会处理 .jsx 文件中的 JSX。

4.环境变量

Vite 对环境变量的处理方式不同：

1. 保留您的 .env 文件
2. 将变量从 REACT_APP_ 重命名为 VITE_
3. 更新参考资料：

// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL

5. 更新包脚本

替换package.json中的脚本：

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "lint": "eslint src --ext .js,.jsx"
  }
}

6. 移动index.html

1. 将 public/index.html 移至根目录
2. 更新一下：

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your App Name</title>
  
  
    <div>



<h2>
  
  
  ? Common Challenges and Solutions
</h2>

<h3>
  
  
  1. JSX in .js Files
</h3>

<p>This is usually the first hurdle. You have two options:</p>

<h4>
  
  
  Option 1: Configure Vite (Recommended)
</h4>

<p>Add the include option as shown in the config above.</p>

<h4>
  
  
  Option 2: Rename Files
</h4>



<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;

2. 绝对进口

更新 vite.config.js:

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}

3.SVG支持

安装并配置 vite-plugin-svgr:

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr';

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

✅ 迁移清单

提交之前：

• [ ] 开发服务器启动
• [ ] 热模块更换有效
• [ ] 环境变量可访问
• [ ] 构建过程成功
• [ ] 导入路径正确解析
• [ ] SVG 和资源加载
• [ ] CSS 模块可以工作

？结论

虽然从 CRA 迁移到 Vite 可能看起来令人畏惧，但性能的提升使其变得值得。请记住：

1. 尽早为 .js 文件配置 JSX 处理
2. 更新环境变量
3. 验证导入路径
4. 彻底测试

您的 React 应用迁移到 Vite 了吗？您面临哪些挑战？在评论中分享您的经验！

---

觉得这有帮助吗？关注我以获取更多 React 和 JavaScript 技巧！

我会积极回复评论和问题。如果您需要有关迁移过程的任何说明，请告诉我！