webpack + React项目中使用vite开发

最近在写一个体量很大的项目时发现编译过程特别慢长，为了提高一下开发体验同时学习一下vite，于是尝试在webpack + React的项目中使用vite起一个开发服务（vite的速度这里就不多说了，懂的都懂），搞了一下午终于成功了，废话不说，开整

如果你的项目中使用的typescript，那么你只需要四步就可以了：

一、安装依赖

yarn add -D vite @vitejs/plugin-react

二、添加配置文件

在项目根目录新增vite.config.js文件，并写入

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { // 配置别名
      '@': resolve('src'),
    },
  },
});
复制代码

查看更多vite配置

三、添加入口文件

把public中的index.html复制一份放在项目根目录，并写入

<div id="root"></div>
<script>
  window.process = {
    env: {
      REACT_APP_ENV: 'test'
    }
  }
</script>
<script type="module" src="/src/index.tsx"></script>
复制代码

四、添加scripts命令

在package.json中添加dev命令

"scripts": {
    "dev": "vite"
}
复制代码

配置完上面四步，我的webpack + React + typescript项目已经可以通过 yarn dev 来使用vite启动开发服务了。

但是当我满怀信心的在另一个没有使用typescript的老项目中使用时，发现很多报错，咱们来一一解决：

报错一、不识别  jsx 语法