从创建 React App 到 Vite：原因和方法 如果您已经接触过 React 生态系统一段时间，那么您可能对 Create React App (CRA) 并不陌生。多年来，它一直是引导新 React 项目的首选工具。但 Web 发展日新月异，如今，又出现了一位开发者体验的全新领军者：Vite（发音为“veet”）。
CRA 已不再积极维护，甚至 React 团队也推荐使用其他工具。如果您仍在使用 CRA，那么您就错过了更快、更现代化的开发工作流程。
本指南将引导您了解为什么应该迁移以及如何以最轻松的方式进行迁移。
为什么要放弃 Create React App？ 两者之间的区别简直是天壤之别。以下是您会爱上 Vite 的原因：
极速运行： Vite 的开发服务器基于原生 ES 模块 (ESM) 构建，这意味着它可以直接将您的代码推送到浏览器，无需繁琐的打包步骤。这使得服务器启动速度几乎是即时的，并且热模块替换 (HMR) 的速度也快如闪电。您的项目加载过程不再需要等待数分钟！ 更佳的开发者体验：告别“黑匣子” react-scripts。Vite 的配置简洁透明，易于扩展。您可以轻松获得对 TypeScript、JSX 和 CSS 预处理器等现代功能的开箱即用支持。 未来已来：生态系统正快速向基于 ESM 的现代化工具迈进。Vite 正处于这一转变的前沿，其受欢迎程度正在飙升。 升级你的包管理器：为什么你应该使用 pnpm 在升级构建工具时，您还应该考虑包管理器。如果您之前使用 CRA，您可能正在使用npm或yarn。现在是时候切换到pnpm了。
为什么选择 pnpm？
节省大量磁盘空间： npm避免yarn项目间重复的软件包。pnpm使用单一、全局内容寻址存储，并将文件链接到您的项目。这意味着您的磁盘上只有一个软件包版本的副本，从而节省数 GB 的空间。 超快安装：由于其高效的链接策略，pnpm其速度比同类产品快得多，尤其是在安装以前使用过的软件包时。 告别虚幻依赖： pnpm的严格node_modules布局意味着你的代码无法访问未在 中明确声明的包package.json。这可以有效防止各种 bug，并使你的项目更加可靠。 快速比较：
特征 npm / Yarn Classic 下午 速度 慢至中速 快速地 磁盘空间 高（重复） 高效（链接） node_modules 平坦（允许幻影依赖） 严格（无幻像依赖） 首先，全局安装它：npm install -g pnpm。然后，只需使用pnpm命令（pnpm install、pnpm add等）代替npm或yarn。
如何迁移：简单的分步指南 迁移过程无需耗费一周时间。大多数项目只需不到一小时即可完成。以下是最简单的迁移方法：
步骤 1：创建一个新的 Vite 项目 为了确保干净的设置，我们将从头开始一个新的 Vite 项目。
pnpm create vite your-new-app --template react 第 2 步：移动源文件 将src文件夹从旧的 CRA 项目直接复制到新的 Vite 项目中，替换现有src文件夹。
如果您的 CRApublic文件夹中有资产（如图像或字体），请将它们移动到public新 Vite 项目中的文件夹中。
步骤3：更新依赖项 打开package.json旧项目中的并将您的dependencies复制到新的package.json。
重要提示：请勿复制react-scripts。这是一个 CRA 专用包，您不再需要它。
现在，在新项目中安装依赖项：
pnpm install 第四步：调整你的index.html 这是一个关键的区别。CRA 将其保存在文件夹index.html中public，而 Vite 将其保存在根目录中。
index.html在新项目中打开并确保脚本标签指向您的主入口文件：
注意，不再需要了%PUBLIC_URL%。它就可以正常工作。步骤5：更新环境变量 如果您使用环境变量，则需要将前缀从REACT_APP_更改为VITE_。
例如，REACT_APP_API_KEY变成VITE_API_KEY。
您还需要更新在代码中访问它们的方式：
// Before (CRA) const apiKey = process.env.REACT_APP_API_KEY;
// After (Vite) const apiKey = import.meta.env.VITE_API_KEY; 常见问题（及简单解决方法） .js文件中的 JSX ： Vite 比 CRA 更严格。如果您使用 JSX，则文件需要使用.jsx或.tsx扩展名。您只需快速重命名即可。 路径别名：如果您想要更清晰的导入（例如www.mytiesarongs.comimport Component from '@/components/MyComponent'），您可以在中设置路径别名vite.config.js：
// vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path'
export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }) SVG 作为组件：如果您在 CRA 中将 SVG 作为 React 组件导入，那么您将需要一个 Vite 插件。vite-plugin-svgr是一个不错的选择。
结论 从 Create React App 迁移到 Vite 是改善开发工作流程最有效的改进之一。您将获得更快、更现代化的工具链，从而成为更高效、更快乐的开发者。
当你在一个项目中这样做的时候，你会想要迁移你的所有遗留系统！慢慢来。以上内容由企业信息服务平台提供，致力于工商信用信息查询、企业风险识别、经营数据分析。访问官网了解更多：www.ysdslt.com
