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配置^[1]

三、添加入口文件

把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 语法

这是因为vite默认只会对 .ts .tsx .jsx 文件进行jsx语法解析，所以如果项目中在js文件中写了jsx，vite就会报错

解决方案

看到这个错误的时候我下意识的想到把js文件改成jsx，但是看了看项目中几百个js文件我沉默了，一定有更好的解决方案，最后我在vite的issues中找到一个比较好的解决方法（原文^[2]），在 vite.config.js 中添加下面的配置让esbuild预编译时能够识别js文件中的jsx

optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: 'load-js-files-as-jsx',
          setup(build) {
            build.onLoad({ filter: /src/.*.js$/ }, async args => ({
              loader: 'jsx',
              contents: await fs.readFile(args.path, 'utf8'),
            }));
          },
        },
      ],
    },
 },

但是我试了下我的项目中并不好使，最后搭配一个babel插件才解决了这个问题：@babel/plugin-transform-react-jsx

plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-transform-react-jsx'],
      },
    }),
],

报错二、postcss 8 版本问题

postcss版本冲突原因（vite中引用了postcss 8 版本）

解决方案

在package.json中resolution中指定一下pastcss版本就好了

"resolutions": {
    "postcss": "^8.4.6",
},

报错三：Inline JavaScript is not enabled

解决方案

在vite.config.js中添加css配置

css: {
  preprocessorOptions: {
    less: {
      javascriptEnabled: true,
    },
  },
},

报错四：require is not defined

项目中使用了require，vite不支持

解决方案

1、安装 @originjs/vite-plugin-commonjs 插件

yarn add -D @originjs/vite-plugin-commonjs

2、vite.config.js 中使用插件

import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 
...

plugins: [
  react({
    babel: {
      plugins: ['@babel/plugin-transform-react-jsx'],
    },
  }),
  viteCommonjs(),
],