前言

众所周知，Vite 已然占据 web 开发的半壁江山。无论是 Vue 项目还是 React 项目，我都习惯使用 Vite 去开发构建。但是，有个问题一直困扰着我，那就是，项目需要兼容 Chrome 72 版本的浏览器，虽然采用了 @vitejs/plugin-legacy插件做兼容，但是此插件只在build阶段生效，serve阶段不生效，这就导致项目只能在高版本浏览器中开发，项目的兼容性问题，我无法在开发阶段发现。基于此，我决定研究下怎么在低版本浏览器中运行Vite启动的项目。

前提

先来了解下 Vite，官网描述如下：Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
1.一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
2.一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

由此可知，开发环境下，Vite 是依赖于原生ES模块的，即浏览器必须支持import、export语法，否则，Vite将无法运行，
来看下原生ES模块的兼容性：

结论如下：

Chrome >= 63
Edge >= 79
Safari >= 11.1
FireFox >= 67
Opera >= 50
IE 全系不支持

我的电脑上现有 Chrome 72 版本的浏览器，满足条件，那就拿它来测试吧。

兼容方案
寻找插件
首先查看下社区是否有可用的兼容插件，发现如下插件：
vite-plugin-babel - 用于构建和服务器的 Babel 集成以支持 f.ex. 纯 JS/JSX 文件中的装饰器或类字段。
@rollup/plugin-babel - rollup 官方babel插件

第一个 看了下 github，标星 35，有点不太靠谱。再看第二个，官方插件，稳定性还是值得肯定的，就你了。

项目添加低版本浏览器不支持的语法
在项目中添加当前浏览器不支持的语法，使其无法在chrome72版本的浏览器上正常打开。可选链运算符 是个不错的方案，该语法在chrome >= 80 上才支持，满足条件。

启动项目，查看报错
启动下项目，并在chrome 72 版本打开，确实报错了，报错信息如下：可以看到确实是 可选链运算符 语法报错了。符合预期。

兼容
首先安装 @rollup/plugin-babel 和 预设兼容包 @babel/preset-env

pnpm i @rollup/plugin-babel @babel/preset-env -D

在 Vite 插件中使用该插件

import { defineConfig } from 'vite';
import babel from '@rollup/plugin-babel';
// 堆代码 duidaima.com
export default defineConfig({
  plugins: [
    babel({
        include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: 3,
              targets: {
                chrome: '72',
              },
              modules: false,
            },
          ],
        ],
      }),
  ],
});

使用 @babel/preset-env 做兼容，下面解释下它配置项：
useBuiltIns: 'usage': 遇到不兼容的语法时，引入对应的polyfill
corejs: core-js 使用 3 版本，具体参考 这里
targets: 兼容列表
modules: 不要转换代码中的ES module语法

配置还挺简单的，启动下看看吧。还是报错，报错信息和上边的一致，难道，这个插件没有生效吗？抱着怀疑的态度，我又去看了下插件的说明文档，发现在babel配置项之外，插件还提供了几个额外的配置项，其中有一个这样的配置项：

是不是应该将我需要转译的 .Vue .ts 等扩展名显示声明呢？试一试：
添加配置如下：

import { defineConfig } from 'vite';
import babel from '@rollup/plugin-babel';

export default defineConfig({
  plugins: [
    babel({
        include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
        extensions: ['.vue', '.ts', '.js', '.tsx', '.jsx'], // 添加此行
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: 3,
              targets: {
                chrome: '72',
              },
              modules: false,
            },
          ],
        ],
      }),
  ],
});

启动试试，项目启动成功！！

总结
本文主要讲解了如何使用 @rollup/plugin-babel 插件使 Vite 项目在开发时运行在低版本浏览器中，其中关键点是 插件提供的 extensions 配置项，需要显示声明需要转换的文件后缀名。