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

接上文 Vite - 兼容旧版浏览器 plugin-legacy（1）

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"
]

---

参考：

参考1

参考2