最近在写一个体量很大的项目时发现编译过程特别慢长，为了提高一下开发体验同时学习一下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 语法
这是因为vite默认只会对 .ts .tsx .jsx 文件进行jsx语法解析，所以如果项目中在js文件中写了jsx，vite就会报错
解决方案
看到这个错误的时候我下意识的想到把js文件改成jsx，但是看了看项目中几百个js文件我沉默了，一定有更好的解决方案，最后我在vite的issues中找到一个比较好的解决方法（原文）， 在 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(),
],
复制代码报错五：vite不支持 require.context 写法
// const files = require.context('./models', false, /\.js$/);
解决方案
这里使用 import.meta.globEager() 代替 require.context
const files = import.meta.globEager('./models/*.js');
以上就是我今天在 webpack + react 项目中体验 vite 的全过程，有不足的地方欢迎评论区讨论，在线接受批评。