[打包框架]前端项目打包框架升级的过程记录（CRA升级为Vite）

前言

入职之前项目使用create-react-app搭建，在后续开发过程中由于某些特定需求需要对打包进行配置，但由于本人对CRA的配置不太了解，项目并非本人搭建，所以在此过程中萌生了将CRA转为Vite的想法。

对比

CRA的打包配置较为封闭、针对于某些插件的配置较为麻烦，重写某些配置项需要使用react-app-rewired库，文档比较难找。
Vite打包速度更快，对于各个组件的配置较为直观，可以直接在vite.config.js中进行配置，文档比较齐全，并且有webpack基础，使用起来很方便，后续支持页比CRA好很多。

开始

参考文章：基本操作

1. 首先将原本的CRA相关的包进行删除，比如react-scripts、react-app-rewired等。
2. 将./public目录下index.html移到根目录下，同时添加script标签，src指向入口文件，如果html中有任何%PUBLIC_URL%/，将它改为/。
3. 删除之前的配置文件，比如config-override.js。
4. 安装vite，并且修改package.json的启动脚本

简化

由于本项目历史悠久（两三个月了），欠缺管理（js、ts争奇斗艳），导致如果自己从头配置比较麻烦，第一次的时候就是在某个快下班的时间为了不影响提交代码被迫中途放弃。需要考虑对各种文件的兼容性。
针对于复杂项目，可以使用vite新建一个ts项目，这样可以直接对比新项目中的配置进行复制，比如package.json需要的各种依赖，以及vite.config.js中的配置项。将基础的配置拿来运行没问题，之后就是将之前的一些特定配置迁移到vite.config.js中来完善功能即可。

注意

1、 环境变量的配置发生了变化，除了根据VIte官网进行配置，如果是ts还需要在src文件下新建env.d.ts文件，否则在使用的时候会ts检查没变量且使用没有提示，配置如下：

/// <reference types="vite/client" />
// 添加提示
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string;
  readonly VITE_CREATE_MODAL_BASE_URL: string;
  readonly VITE_SOCKET_BASE_URL: string;
  readonly VITE_CREATE_MODAL_SOCKET_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
//使用
const baseURL = import.meta.env.VITE_BASE_URL;

2、 如果你的项目使用了gitlab的CI/CD，要注意vite打包目录为dist，和之前的build目录不一样，可以修改vite打包目录，也可以修改CI/CD文件的路径，CI/CD脚本路径修改在项目的跟文件夹下有一个**.gitlab-ci.yml**，编辑此文件中的script中的路径即可

3、在.gitignore文件中添加忽略dist文件的提交
4、vite打包在默认情况下单个chunks大小超过500kb的情况下会提示，该提示会导致CI/CD不成功，所以修改配置之后最好先本地build一下

build: {
    chunkSizeWarningLimit: 2500,
  },