当前位置：首页 > 文章列表 > 文章 > 前端 > 从 Create React App 迁移到 Vite：分步指南

从 Create React App 迁移到 Vite：分步指南

来源：dev.to 2024-09-09 09:39:52 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《从 Create React App 迁移到 Vite：分步指南》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

作为 react 开发人员，我们一直在寻找提高开发体验和应用程序性能的方法。您可能会考虑的一项重大升级是从 create react app (cra) 迁移到 vite。 vite 提供更快的构建时间、更快的热模块更换 (hmr) 和更简化的开发体验。在这份综合指南中，我们将逐步介绍将 cra 项目迁移到 vite 的过程，包括处理代理服务器和启用 gzip 压缩。

为什么迁移到vite？
先决条件
第一步：创建一个新的vite项目
第 2 步：移动源代码
第 3 步：更新 package.json
第四步：配置vite
第 5 步：更新进口声明
第6步：处理环境变量
第 7 步：更新测试配置
第 8 步：配置代理服务器
第 9 步：启用 gzip 压缩
第 10 步：最终清理
结论

为什么迁移到vite？

在我们深入了解迁移过程之前，让我们简要讨论一下您可能想要从 cra 切换到 vite 的原因：

更快的开发服务器启动：vite使用原生es模块，这大大减少了启动开发服务器所需的时间。
更快的热模块替换 (hmr)：代码中的更改几乎立即反映在浏览器中。
提高了构建性能：vite 的生产构建通常更快，并且包大小更小。
更灵活的配置：vite 允许更轻松地自定义构建过程。

先决条件

开始迁移过程之前，请确保您已：

node.js（版本 18+）
npm 或 yarn
要迁移的 create react app 项目

第1步：创建一个新的vite项目

首先，我们新建一个vite项目：

npm create vite@latest my-vite-app -- --template react
cd my-vite-app

此命令使用 react 模板创建一个新的 vite 项目。我们将使用它作为迁移的基础。

第 2 步：移动源代码

现在，让我们将现有的源代码从 cra 项目移动到新的 vite 项目：

将 cra 项目中的 src 目录复制到新的 vite 项目中，替换现有的 src 目录。
将您可能拥有的任何其他目录（例如 public、assets）复制到 vite 项目根目录。

第3步：更新package.json

我们需要更新 package.json 文件以包含 cra 项目中的所有依赖项：

将 cra 项目的 package.json 中的依赖项和 devdependency 复制到新 vite 项目的 package.json 中。
删除 cra 特定的依赖项，例如反应脚本。
添加vite特定脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "test": "vitest",
  "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
}

安装依赖项：

npm install

第四步：配置vite

在项目根目录创建一个 vite.config.js 文件：

import { defineconfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineconfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
})

此配置设置 react 插件，定义 src 目录的别名，并将开发服务器端口设置为 3000（与 cra 的默认值匹配）。

第 5 步：更新进口声明

vite 使用 es 模块，因此您可能需要更新一些导入语句：

在不使用 jsx 的文件中，将 import react from 'react' 替换为 import * as react from 'react'。
更新所有使用 cra 特定别名（如 src/）的导入以使用新别名 (@/) 或相对路径。

第6步：处理环境变量

vite 处理环境变量的方式与 cra 不同：

重命名 .env 文件以使用 vite 前缀：.env、.env.local、.env.development、.env.production。
更新代码中的环境变量用法：
- 将 process.env.react_app_* 更改为 import.meta.env.vite_*
- 在您的 .env 文件中，将变量从 react_app_* 重命名为 vite_*

第7步：更新测试配置

如果您将 jest 与 cra 一起使用，则需要切换到 vitest，它与 vite 集成得更好：

安装vitest及相关包：

npm install -d vitest jsdom @testing-library/react @testing-library/jest-dom

在项目根目录中创建 vitest.config.js 文件：

import { defineconfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineconfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupfiles: './src/setuptests.js',
  },
})

更新您的测试文件以使用 vitest 语法（大多数 jest 测试应该只需进行最少的更改即可工作）。

步骤 8：配置代理服务器

如果您的 cra 项目使用了代理配置，您需要在 vite 中进行设置：

安装http代理：

npm install -d http-proxy

更新你的 vite.config.js：

import { defineconfig } from 'vite'
import react from '@vitejs/plugin-react'
import httpproxy from 'http-proxy'

const proxy = httpproxy.createproxyserver()

export default defineconfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeorigin: true,
        configure: (proxy, options) => {
          proxy.on('error', (err, req, res) => {
            console.log('proxy error', err)
          })
          proxy.on('proxyreq', (proxyreq, req, res) => {
            console.log('sending request to the target:', req.method, req.url)
          })
          proxy.on('proxyres', (proxyres, req, res) => {
            console.log('received response from the target:', proxyres.statuscode, req.url)
          })
        },
      },
    },
  },
})

此配置为 /api 请求设置代理到 http://localhost:5000。根据后端需要调整目标 url。

第 9 步：启用 gzip 压缩

在 vite 中启用 gzip 压缩：

安装 vite-plugin-compression 插件：

npm install -d vite-plugin-compression

更新你的 vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
  // ... other configurations
})

此设置将在构建过程中生成资产的 gzip 压缩版本。

第 10 步：最终清理

删除任何 cra 特定的文件和文件夹：
- 如果您使用的是react-app-rewired，请删除config-overrides.js
- 从 package.json 中删除弹出脚本
更新您的 readme.md 以反映新的 vite 设置和命令。
更新您的 ci/cd 管道以使用新的 vite 命令（npm run dev、npm run build 等）。