vite react项目配置babel

在 Vite 项目中配置 Babel，需要安装 `@babel/core` 和 `@babel/preset-react`，并且在 `vite.config.js` 文件中进行配置。具体步骤如下：

1. 安装依赖：

   npm install --save-dev @babel/core @babel/preset-react

2. 在 `vite.config.js` 文件中添加以下代码：

   import reactRefresh from '@vitejs/plugin-react-refresh';
   
   export default {
     plugins: [reactRefresh()],
     esbuild: {
       jsxInject: `import React from 'react'`,
     },
     optimizeDeps: {
       include: ['@babel/runtime']
     },
     rollupInputOptions: {
       external: ['react', 'react-dom'],
     },
     rollupOutputOptions: {
       globals: {
         react: 'React',
         'react-dom': 'ReactDOM',
       }
     },
     // Babel 配置
     babel: {
       presets: ['@babel/preset-react'],
     },
   };

3. 进行测试，在项目中使用 JSX 语法即可。

需要注意的是，Vite 默认使用 esbuild 进行打包，而 esbuild 已经可以处理 JSX 语法，但是在某些情况下可能会出现问题。因此，建议在 Vite 项目中配置 Babel，以确保项目的稳定性和兼容性。