前言
项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。
默认情况vite的兼容目标是支持原生ES模块，原生ESM动态导入和import.meta的浏览器，官方预设的兼容目标如下：

es2020
edge 88
firefox 78
chrome 87
safari 14

而我们的可选链正是es2020版本才有的，所以vite在打包后不会做任何兼容处理，这就导致了一些浏览器版本低一点的设备，打开网站就会出现白屏的情况。
显然这么新的版本在大部分的目标用户中，也是很超前的，所以做一些适当的兼容处理还是有必要的。
教程

 1// vite.config.ts 
 2import { defineConfig } from 'vite' 
 3import vue from '@vitejs/plugin-vue' 
 4
 5// https://vitejs.dev/config/ 
 6export default defineConfig({ 
 7    plugins: [vue()], 
 8    build: { target: "es2015" } 
 9})

通过指定打包后的目标版本就行了，vite会将新的语法通过esbuild进行转换，此时我们在支持esm的浏览器上访问时正常的。（注意只有打包后的代码才会有效）

这里我特意大写了 支持ESM的浏览器是有用意的，我们看下打包后的index.html文件。

可以看到script标签上使用了type="module"属性，显然即便我们的脚本里面已经兼容到了es2015，但是如果浏览器稍微低一点的版本的，它是支持es2015但是它不支持ESM模块啊。
我们看一下对应的支持统计：
es2015
es6版本最经典的就是proxy的支持

ESM模块

可以看到和es2015的支持度还是有一些差别的。
那么就进入到第二个问题，如何兼容不支持esm的浏览器！
兼容ESM浏览器
官方提供了一个插件：legacy
官方对它的定义是：为打包后的文件提供传统浏览器兼容性支持
其实就是对不支持esm的浏览器的支持，同时还有语法降级处理。
先进行安装：

 1pnpm i @vitejs/plugin-legacy@4.1.1 terser -D

需要注意的是vite4的legacy插件最高目前是4.1.1，再高的版本只支持vite5了，使用起来会报错。

legacy插件需要依赖terser对代码进行压缩。

使用起来也很简单，我们直接引入插件并启用即可：

 1// vite.config.ts 
 2import { defineConfig } from 'vite' 
 3import vue from '@vitejs/plugin-vue' 
 4import legacy from "@vitejs/plugin-legacy"; 
 5
 6// https://vitejs.dev/config/ 
 7export default defineConfig({ 
 8    plugins: [ 
 9        vue(), 
10        legacy() 
11    ], 
12    build: { 
13        target: "es2015" 
14    } 
15})

官方定义，在没有明确指定插件配置参数targets时，他会去读取项目中的.browserslistrc文件，我们知道这个文件是一个用于配置支持的浏览器范围的文件，通常会被Babel、Autoprefixer等插件使用。
我个人根据es2015的支持版本书写了一下内容：
.browserslistrc

 1Chrome >= 51 
 2Edge >= 15 
 3Safari >= 10 
 4Firefox >= 54 
 5Opera >= 38 
 6iOS >= 10 
 7not ie <= 11 
 8Android >= 5 
 9not IE <= 11

然后我们再去打包项目，可以发现index.html的脚本引入发生了变化。

可以看到script发生了变化，除了type="module"还有一个nomodule脚本，nomodule这个属性表示在支持esm的浏览器不运行里面的代码，而不支持esm的浏览器又无法识别type="module"，反而会去运行nomodule的script，从而实现了降级区分。
而降级的脚本都会携带一个legacy文本

这个就是用于兼容不支持esm模块的浏览器降级方案。

这个方式的好处在较新的浏览器中可以使用新的特性，旧的浏览器使用legacy降级脚本，从而避免了以前打包时一刀切的兼容方式，所有的代码全部降级处理，使得一些新设备没法体现出新语法的性能。