返回

从 Create React App 无痛迁移到 Vite：快速指南

前端

引言

Vite 是一种令人兴奋的构建工具，它彻底改变了 React 开发体验。与 Create React App（CRA）相比，它提供了更好的性能、更快的构建速度和增量更新，使开发人员能够更有效率地工作。如果您正在考虑将您的 CRA 项目迁移到 Vite，那么本指南将为您提供一个逐步的计划，帮助您顺利完成此过程。

迁移步骤

1. 安装 Vite

在开始迁移之前，您需要在您的项目中安装 Vite。打开您的终端并运行以下命令：

npm install vite --save-dev

2. 创建 Vite 配置文件

接下来，您需要为您的项目创建一个 Vite 配置文件。在项目根目录中创建一个名为 vite.config.js 的文件，并添加以下内容：

import react from '@vitejs/plugin-react';

export default {
  plugins: [react()]
};

3. 将您的应用程序代码迁移到 Vite

现在，您需要将您的应用程序代码迁移到 Vite。这意味着将您的源文件从 src 目录移动到 public 目录。您还需要将以下内容添加到您的 index.html 文件：

<script type="module" src="/main.js"></script>

4. 更新您的依赖项

Vite 使用不同的依赖管理系统，因此您需要更新您的依赖项以匹配 Vite。运行以下命令：

npm install --save-dev react react-dom

5. 移除 CRA 脚本

由于您不再使用 CRA，因此可以安全地移除以下脚本：

  • react-scripts start
  • react-scripts build
  • react-scripts test

6. 启动 Vite 开发服务器

现在，您可以通过运行以下命令启动 Vite 开发服务器：

npm run dev

7. 验证迁移

服务器启动后，您的应用程序应按预期运行。如果您遇到任何问题，请检查控制台是否有错误。

Vite 的好处

迁移到 Vite 后，您将体验到许多好处，包括：

  • 卓越的性能： Vite 使用原生 ESM（ECMAScript 模块）和 Rollup，可提供比 CRA 更快的构建速度。
  • 增量构建： Vite 仅在更改的文件发生变化时重建受影响的部分，从而显著加快了开发周期。
  • 热模块替换： Vite 提供热模块替换功能，允许您在保存更改时实时更新应用程序，而无需重新加载页面。
  • 更小的包大小： Vite 产生更小的包大小，从而提高了应用程序的加载速度。
  • 更好的开发人员体验： Vite 提供了一个更现代、更直观的开发人员体验，包括支持 TypeScript 和 JSX。

结论

通过遵循本指南中的步骤，您可以轻松地将您的 CRA 项目迁移到 Vite。迁移到 Vite 将为您带来许多好处，包括更好的性能、更快的构建速度和增强的开发人员体验。如果您正在寻找提升 React 开发工作流程的方法，那么迁移到 Vite 是明智之举。