DEV Community ·

从 Create React App 迁移到 Vite（附加 Vitest 的使用）

💡 原文英文，约900词，阅读约需4分钟。

📝

内容提要

Create React App（CRA）已被弃用，建议迁移至Vite。Vite具有快速、简单配置和安全性，能提升开发体验。迁移步骤包括备份项目、卸载CRA、安装Vite、创建配置文件、更新脚本和HTML文件。若使用Jest测试，可切换至Vitest以提高测试效率。

🎯

🔎

Create React App（CRA）已被弃用，继续使用可能导致安全漏洞和缺乏支持。迁移到Vite不仅能提升开发体验，还能确保项目的安全性和可维护性。随着技术的发展，使用过时工具可能会面临兼容性问题，因此尽早迁移是明智之举。

Vite以其快速的构建速度和简单的配置而受到开发者的青睐。它利用现代ES模块和esbuild技术，使得开发服务器几乎瞬间启动，并且热重载速度极快。这种高效的开发体验能够显著提高开发者的工作效率，值得考虑。

对于使用Jest进行测试的开发者，迁移到Vitest是一个理想选择。Vitest与Vite无缝集成，提供更快的测试速度和更轻量的框架。大多数Jest测试可以无缝迁移到Vitest，减少了迁移过程中的复杂性，提升了测试效率。

❓

迁移到Vite可以提高开发速度、简化配置、增强安全性，并改善开发体验。

迁移步骤包括备份项目、卸载CRA、安装Vite、创建配置文件、更新脚本和HTML文件。

使用CRA可能面临安全漏洞、缺乏支持、兼容性问题和技术债务。

安装Vitest，更新vite.config.js配置，替换package.json中的测试脚本，并迁移测试用例。

Vite具有更快的启动速度、现代化的工具、简单的配置和更好的安全性。

在vite.config.js中引入@vitejs/plugin-react插件，并进行基本配置。

🏷️