从 Create React App 迁移到 Vite：分步指南
内容提要
本文介绍了将Create React App（CRA）迁移到Vite的过程，Vite提供更快的构建时间、更快的热模块替换（HMR）和更流畅的开发体验。迁移过程包括创建新的Vite项目、移动源代码、更新package.json、配置Vite、更新导入语句、处理环境变量、更新测试配置、配置代理服务器、启用Gzip压缩和最后的清理工作。迁移到Vite可以显著提高开发体验和应用性能。
延伸解读
迁移前的环境与依赖检查
迁移前需确保Node.js版本为18或更高，并安装npm或Yarn。同时，备份现有CRA项目，因为迁移过程涉及复制src目录和更新package.json，可能因依赖冲突或配置遗漏导致问题。检查项目是否使用react-app-rewired或config-overrides.js，这些CRA特定工具在Vite中不再适用，需提前规划替代方案。
环境变量与测试配置的关键差异
Vite使用import.meta.env.VITE_*替代CRA的process.env.REACT_APP_*，且.env文件中的变量前缀需从REACT_APP_改为VITE_。测试方面，需从Jest切换到Vitest，并创建vitest.config.js，设置globals、jsdom环境和setupFiles。大多数Jest测试可兼容，但需更新测试文件中的导入和语法。
代理与Gzip压缩的配置要点
若CRA项目使用代理，需在Vite中安装http-proxy并在vite.config.js的server.proxy中配置，示例将/api请求代理到http://localhost:5000，并添加错误和请求日志。启用Gzip压缩需安装vite-plugin-compression，配置threshold、algorithm等参数，构建时生成.gz文件，有助于减小资产体积。
迁移后的清理与持续集成调整
迁移完成后，删除CRA特定文件如config-overrides.js，移除package.json中的eject脚本。更新README.md以反映新的Vite命令，并调整CI/CD管道使用npm run dev、npm run build等。务必彻底测试应用，确保所有功能正常，并根据项目结构进行额外调整。
Q&A
为什么要从Create React App迁移到Vite？
迁移到Vite可以提高开发体验和应用性能，提供更快的构建时间和热模块替换（HMR）。
迁移到Vite的第一步是什么？
第一步是创建一个新的Vite项目，使用命令：npm create vite@latest my-vite-app -- --template react。
如何更新package.json以适应Vite？
需要将CRA项目的依赖项复制到新的Vite项目的package.json中，并移除CRA特定的依赖项。
如何处理环境变量的迁移？
需要将.env文件重命名为使用Vite前缀，并在代码中将process.env.REACT_APP_*替换为import.meta.env.VITE_*。
如何配置Vite的代理服务器？
需要在vite.config.js中设置代理，指定目标URL并处理请求和响应的日志。
迁移后需要做哪些清理工作？
需要删除CRA特定的文件和文件夹，更新README.md和CI/CD管道以反映新的Vite设置。
