语法降级与 Polyfill：解决低版本浏览器兼容问题

提到前端编译工具链方面，可能大家最新想到的是诸如@babel/preset-env、core-js、regenerator-runtime 等工具。不过，我们今天要讲的是官方的 Vite 插件@vitejs/plugin-legacy，以及如何将这些底层的工具链接入到 Vite 中，并实现开箱即用的解决方案。

一、浏览器兼容问题

首先我们来复现一下问题场景，下面展示了之前在线上环境真实遇到的报错案例。

某些低版本浏览器并没有提供 Promise 语法环境以及对象和数组的各种 API，甚至不支持箭头函数语法，代码直接报错，从而导致线上白屏事故的发生，尤其是在 IE 11、iOS 9 以及 Android 4.4 等场景中很容易遇到。

旧版浏览器的语法兼容问题主要分两类：语法降级问题和 Polyfill 缺失问题。前者比较好理解，比如某些浏览器不支持箭头函数，我们就需要将其转换为 function(){}语法；而对后者来说，Polyfill 本身可以翻译为垫片，也就是为浏览器提前注入一些 API 的实现代码，如 Object.entries 方法的实现，这样可以保证产物可以正常使用这些 API，防止报错。

这两类问题本质上是通过前端的编译工具链 (如 Babel) 及 JS 的基础 Polyfill 库 (如 corejs) 来解决的，不会跟具体的构建工具所绑定。也就是说，对于这些本质的解决方案，在其它的构建工具 (如 Webpack) 能使用，在 Vite 当中也完全可以使用。

构建工具考虑的仅仅是如何将这些底层基础设施接入到构建过程的问题，自己并不需要提供底层的解决方案，正所谓术业有专攻，把专业的事情交给专业的工具去做。接下来，我们就一起熟悉这些所谓专业的工具，以及如何使用它们。

二、底层工具链

2.1 工具概览

解决上述提到的两类语法兼容问题，主要需要用到两方面的工具，分别包括：

• 编译时工具：代表工具有@babel/preset-env 和@babel/plugin-transform-runtime。
• 运行时基础库：代表库包括 core-js 和 regenerator-runtime。

编译时工具的作用是在代码编译阶段进行语法降级及添加 polyfill 代码的引用语句，如下。

import "core-js/modules/es6.set.js"

由于这些工具只是编译阶段用到，运行时并不需要，我们需要将其放入 package.json 中的 devDependencies 中。

而运行时基础库是根据 ECMAScript 官方语言规范提供各种 Polyfill 实现代码，主要包括 core-js 和 regenerator-runtime 两个基础库，不过在 babel 中也会有一些上层的封装，包括：

• @babel/polyfill
• @babel/runtime
• @babel/runtime-corejs2
• @babel/runtime-corejs3

2.2 基本使用

了解了基本概念后，接下来我们来通过代码实操的方式来学习这些工具。可以通过以下命令初始化项目:

mkdir babel-test
npm init -y

然后安装一些必要的依赖：

pnpm i @babel/cli @babel/core @babel/preset-env

下面是各个依赖的作用：

• @babel/cli: 为 babel 官方的脚手架工具，很适合我们练习用。
• @babel/core: babel 核心编译库。
• @babel/preset-env: babel 的预设工具集，基本为 babel 必装的库。

接着，新建 src 目录，在目录下增加 index.js 文件。

const func = async () => {
  console.log(12123)
}

.().();