黑白梦

react-scripts 项目升级至 vite

尝试将博客管理端升级为 vite,升级的过程基本没遇到坑,几乎无缝完成升级。

创建 vite 项目

通过 npm create vite@latest 创建 React TypeScript + SWC 项目,然后将核心文件复制到项目中:

  • src/vite-env.d.ts
  • index.html
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts

把 index.html 中引入的文件直接改成项目中的入口文件。

启动与打包指令

  • 启动:react-scripts start 改为 vite
  • 打包:react-scripts build 改为 vite build

端口和基础路径

移除原有的 .env 配置:

PORT = 3030
PUBLIC_URL = /admin

vite.config.ts 中增加配置:

base: '/admin/',
server: {
  port: 3030,
},

使用: process.env.PUBLIC_URL 改为 import.meta.env.BASE_URL

环境变量

  • 定义:REACT_APP_XXX 改为 VITE_API_XXX
  • 前端代码中调用:process.env.REACT_APP_XXX 改为 import.meta.env.VITE_API_XXX
  • vite.config.ts 中调用: process.env.VITE_API_XXX

本地代理

移除 setupProxy.js,改为使用 vite 的代理:

server: {
  port: 3030,
  proxy: {
    '/xxx': {
      target: process.env.VITE_XXX,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/xxx/, ''),
    },
  },
}, 

完成升级

经过以上的这些操作,整个项目就可以完好的跑起来了,路由、antd及其他第三方依赖运行起来都很正常。然后就是移除掉 react-scripts 相关的依赖和配置文件,即完成全部升级过程。

升级为 vite 后,启动和热更新速度都得到较大提升,基本是 1 秒内即可完成项目启动,尤大实在是太强了。

本文收录于专栏
一些博客建设的记录