解决Vue3.0+Vite项目打包后低版本浏览器兼容性问题

看了这篇文章有收获记录下
https://juejin.cn/post/7114586736201580575

用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。作为参考，Vite 使用这个 browserslist 作为查询标准：

Chrome >=87

Firefox >=78

Safari >=13

Edge >=88
也可以通过 build.target 配置项 指定构建目标，最低支持 es2015。
默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。

以下为语法的浏览器兼容示例：

三、官方解决方案：使用@vitejs/plugin-legacy插件

1. 问题分析：
   版本较低的浏览器不支持ES6的语法和新API，而Babel默认只转换新的JavaScript句法，不转换新的API，比如Proxy、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法都不会转码。
2. 解决方案：

传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持

它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

安装插件：npm i @vitejs/plugin-legacy -D
在vite.config.js中配置

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
     legacy({
         targets: ['defaults', 'ie >= 11', 'chrome 52'],  //需要兼容的目标列表，可以设置多个
         additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
         renderLegacyChunks:true,
         polyfills:[
            'es.symbol',
            'es.array.filter',
            'es.promise',
            'es.promise.finally',
            'es/map',
            'es/set',
            'es.array.for-each',
            'es.object.define-properties',
            'es.object.define-property',
            'es.object.get-own-property-descriptor',
            'es.object.get-own-property-descriptors',
            'es.object.keys',
            'es.object.to-string',
            'web.dom-collections.for-each',
            'esnext.global-this',
            'esnext.string.match-all'
        ]
     })
  ]
}

@vitejs/plugin-legacy插件，在打包过程中做了什么？

打包过程中使用@babel/preset-env转换浏览器不支持的语法和新API，为包中的每个块生成相应的转化块；
生成一个包含 SystemJS 运行时的 polyfill 块；
在打包文件中生成带有legacy名的文件，每个js脚本文件都有一个与其对应的转化版本；
html文件中新增了一些script-nomodule脚本，这些脚本根据浏览器的支持程度来动态的引入正常版本文件还是带有legacy字

链接：https://juejin.cn/post/7114586736201580575
来源：稀土掘金