Vite 打包兼容性

Vite 默认打包结果比较现代，有一定概率产生 js 的语法兼容性问题。Vite 默认在build.target中处理结果的目标版本。但是经观察似乎只会处理用户代码，并不会处理依赖中的不兼容问题，所以需要额外配置来做转换。这里的解决方案是使用@vite/plugin-legacy插件。

安装

1	npm install "@vitejs/plugin-legacy@4" -D

依赖大版本需要与vite大版本保持一致，本文假定vite@^4。

配置

编辑viteconfig.ts文件，添加如下代码：

import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
  ...,
  plugins: [
    ...,
    legacy({
      // 'edge>=79, firefox>=67,chrome>=64, safari>=12,chromeAndroid>=64, iOS>=12'
      modernTargets: 'defaults',
      modernPolyfills: ['es.object.has-own'],
      renderLegacyChunks: false,
    })
  ]
  ...,
})

解释

renderLegacyChunks: false，不输出对传统浏览器的兼容代码，只保留对现代浏览器的兼容。因为目前遇到的问题为 Chrome80 左右的问题，只调整现代浏览器的配置即可。传统浏览器的输出甚至能够支持 ie11，也属实没有必要，而且会让整个打包体积增大，速度变慢。
modernTargets: 'defaults'，控制目标现代浏览器的配置，默认为 edge>=79, firefox>=67,chrome>=64, safari>=12,chromeAndroid>=64, iOS>=12. 也可以使用任意 babel 支持的string | string[]。
modernPolyfills，需要手动添加的 polyfill，上文为'es.object.has-own'，即Object.hasOwn。具体查询node_modules/core-js/module/中的文件名，比如这个叫es.object.has-own。

参考 plugin-legacy 的 npm