在vite+react框架搭建的项目中,用使用到babel相关的配置,那如何使得 .babelrc 和 babel.config.js 文件在配置功能生效呢?这需要使用到vite 提供的组件 @vitejs/plugin-react ,在其vite.config.ts (或vite.config.js)中进行导入配置,具体步骤如下:
yarn add @vitejs/plugin-react
在vite.config.ts中进行导入和配置即可,详解见:https://github.com/vitejs/vite/tree/main/packages/plugin-react#babel-configuration
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react({
babel: {
presets: [...],
// Your plugins run before any built-in transform (eg: Fast Refresh)
plugins: [...],
// Use .babelrc files
babelrc: true,
// Use babel.config.js files
configFile: true,
}
}),
]
})
然后在根目录下,新建 .babelrc 文件和babel.config.js文件,具体使用babel配置见:https://babeljs.io/docs/en/