当前位置: 首页 > 工具软件 > .config > 使用案例 >

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

林铭
2023-12-01

在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/

 类似资料: