@vitejs/plugin-legacy：polyfills 与 现代Polyfills

Question

我正在将 Vite 与 CSR React 应用程序一起使用。我最近将应用程序的依赖项更新到了最新版本，并且在现代浏览器中的开发和生产中一切都运行良好。

该应用程序的依赖项之一正在使用

Object.hasOwn

，这导致某些使用旧版浏览器的用户出现以下错误：

Object.hasOwn is not a function

。

为了解决该问题，我将以下设置添加到

@vitejs/plugin-legacy

：

plugins: [
  react(),
  legacy({
    targets: ['defaults', 'not IE 11'],
    polyfills: ['es/object/has-own'],
  }),
],

但是，这并没有解决问题，错误仍然存在。

我更新了旧插件设置如下：

plugins: [
  react(),
  legacy({
    targets: ['defaults', 'not IE 11'],
    polyfills: ['es/object/has-own'],
    modernPolyfills: ['es/object/has-own'],
  }),
],

通过此设置，该错误似乎已在旧版浏览器中得到修复。

根据官方文档，当应用程序在旧版浏览器中加载时，

polyfills

设置应该添加所需的

Object.hasOwn

polyfill。我不明白的是为什么在我添加

modernPolyfills

设置之前这不起作用。

在这种情况下，

polyfills

和

modernPolyfills

有什么区别？

Answer 1

浏览器加载了一个modern chunk，但是版本低于93，例如chrome，所以这里出现错误。

但我还是有疑问，插件选项modernTargets默认是'edge>=80, firefox>=72, chrome>=80, safari>=13.1, chromeAndroid>=80, iOS>=13.1'。应该生成 Object.hasOwn polyfill。为什么不工作？