我是如何在低版本浏览器中运行Vite启动的项目的？

前言

众所周知，Vite 已然占据 web 开发的半壁江山。

无论是 Vue 项目还是 React 项目，我都习惯使用 Vite 去开发构建。

但是，有个问题一直困扰着我，那就是，项目需要兼容 Chrome 72 版本的浏览器，虽然采用了 @vitejs/plugin-legacy插件做兼容，但是此插件只在build阶段生效，serve阶段不生效，这就导致项目只能在高版本浏览器中开发，项目的兼容性问题，我无法在开发阶段发现。

基于此，我决定研究下怎么在低版本浏览器中运行Vite启动的项目。

前提

先来了解下 Vite，官网描述如下：

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 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

bash 复制代码

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

在 Vite 插件中使用该插件

typescript 复制代码

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

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 等扩展名显示声明呢？试一试：

添加配置如下：

typescript 复制代码

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 配置项，需要显示声明需要转换的文件后缀名。