vite构建工具下前端浏览器兼容性处理

发表于 更新于 本文字数： 451 阅读时长 ≈ 1 分钟

vite构建工具下官方有提供方案来处理浏览器兼容性。

方案如下👇

安装插件

官方插件

1
npm install @vitejs/plugin-legacy

配置插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
plugins: [
   ... ,
  legacy({
    targets: [
      'defaults',
      'chrome >= 55',
      'safari >= 12',
      'not IE 11',
      'firefox >= 52',
    ],
  }),
  ...
],

可以看出plugin-legacy让这配置变得比以前简单了，并不需要直接接触browserlist/corejs。

注意

  1. plugin-legacy的配置，由于需要根据目标浏览器来处理polyfill，因此构建耗时会增加。
  2. plugin-legacy本身处理了browserlist/corejs，因此一般情况下都不要手动配置corejs。

写在最后

done。