在vite中使用babel插件

一、为什么要使用babel

​ 在使用vue3.2和vite4.0+开发一个移动端H5，测试时发现低版本的浏览器出现白屏的现象，原因是很多低版本浏览器并不支持原生ESM导入的方式，这就需要使用 babel 插件将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。

​ 那么如何在vite中使用babel插件呢？ 我们可以借助 vite-plugin-babel 插件。

二、如何使用

1. 首先需要安装相关的npm包:

pnpm i vite-plugin-babel @babel/core -D

2. 然后进入vite.config.ts文件中使用babel插件，并且将 build.target 设置为es2015 即可

import vue from '@vitejs/plugin-vue'
import babel from "vite-plugin-babel";
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  base: './',
  plugins: [
    babel(),
    vue(),
    vueJsx(),
    // 其他插件...
  ],
  build: {
    target: 'es2015'
  }
})