在vite+react项目中如何使babelrc和babel.config.js文件生效

在vite+react项目中如何使 .babelrc和babel.config.js文件生效

在vite+react框架搭建的项目中，用使用到babel相关的配置，那如何使得 .babelrc 和 babel.config.js 文件在配置功能生效呢？这需要使用到vite 提供的组件 @vitejs/plugin-react ,在其vite.config.ts （或vite.config.js）中进行导入配置，具体步骤如下：

1.安装插件

yarn add @vitejs/plugin-react

2.导入及配置

在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,
  	    }
    }),
  ]
})

3.新建文件

然后在根目录下，新建 .babelrc 文件和babel.config.js文件，具体使用babel配置见：https://babeljs.io/docs/en/