使用@rollup/plugin-babel 在低版本浏览器中运行ES2020新语法

前言

vite4 + vue3 构建的一个项目，在谷歌75浏览器上跑，然后渺小的我在上面写了ES2020新语法：可选链操作符（?.）、空值合并运算符（??）,然后就在谷歌75浏览器上报错了。

预期结果

在代码使用ES2020新语法并且在谷歌75浏览器上运行不报错。

问题展示

<template>
  <button @click="fun">
    按钮
  </button>
</template>

<script setup>
const fun = () => {
  let a = {
    name: 'joke',
    age: 30,
  }
  let b = a?.name ?? 'tom';
  console.log(b)
}
</script>

<style scoped>

</style>

了解vite

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

解决方案

我在网上到了2个兼容方案的插件

• vite-plugin-babel
• @rollup/plugin-babel

不过我在用vite-plugin-babel总是出现一些奇奇怪怪的问题，然后我就又尝试了@rollup/plugin-babel

实践

首先安装 @rollup/plugin-babel 、 预设兼容包 @babel/preset-env、还有core-js

npm install --save-dev @rollup/plugin-babel @babel/preset-env
npm install core-js@3 --save

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import babel from '@rollup/plugin-babel';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    {
      ...babel({
        // // 可选: 'bundled', 'runtime', 'inline', 'external'
        babelHelpers: 'bundled',
        // 处理那些文件
        include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
        // 需要处理的文件类型
        extensions: ['.vue', '.ts', '.js', '.tsx', '.jsx'],
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: 3,
              targets: {
                chrome: '75',
              },
              modules: false,
            },
          ],
        ],
      }),
    },
  ],
})

运行结果

打包

然后我就尝试着打包部署到线上看看会不会也有这个问题，结果又报错了

解决打包到线上报错问题

安装 @vitejs/plugin-legacy

npm install --save-dev @vitejs/plugin-legacy@4

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import babel from '@rollup/plugin-babel';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  {
    ...babel({
      babelHelpers: 'bundled',
      include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
      extensions: ['.vue', '.ts', '.js', '.tsx', '.jsx'],
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            corejs: 3,
            targets: {
              chrome: '75',
            },
            modules: false,
          },
        ],
      ],
    }),
  },
  legacy({
    targets: ['defaults', 'not IE 11', 'chrome >= 75'],
  }),
  ],
})

打包运行结果