Vite - 兼容旧版浏览器 plugin-legacy（2）

1，问题

客户浏览器报错，不支持 replaceAll 方法。

该方法在 query-string 依赖内部使用了。

在这里插入图片描述

查看 vite 的配置，发现已经添加了 @vitejs/plugin-legacy：

import legacy from "@vitejs/plugin-legacy";// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd());return {base: env.VITE_APP_BASE,plugins: [vue(),legacy(),],// ...};
});

2，解决

官方文档中有这样一句话

传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。
兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

而客户浏览器的版本是 chrome77（2019年第1个版本），不是传统浏览器，所以不会使用该插件生成的 xxx-legacy.js，使用的还是正常打包的 js 文件。

而 replaceAll 的兼容性是 chrome85（es2021）：
在这里插入图片描述

所以，需要添加相关的 polyfill 才能适配兼容性。

查看 vite-plugin-legacy 官方文档发现，可以配置 modernPolyfills 选项来添加 polyfill。

import legacy from '@vitejs/plugin-legacy'export default {plugins: [legacy({modernPolyfills: ["es.string.replace-all"],}),],
}

所有支持的 polyfill 可以查看 core-js/modules 列表。

另外，modernPolyfills 也可以设置为 true 来自动检测需要添加的 polyfill。

但最好搭配 modernTargets 选项一起使用，它的作用是指定兼容的现代浏览器版本。因为 core-js/modules 体积比较大，如果指定的版本过低，则打包的产物也会增大。

3，String 其他新增 API 的版本

es2017: ["padStart","padEnd"
],
es2019: ["trimStart","trimEnd","trimLeft","trimRight"
],
es2020: ["matchAll"
],
es2021: ["replaceAll"
],
es2022: ["at"
]