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

· 1 min read

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

方案如下👇

安装插件

官方插件

npm install @vitejs/plugin-legacy 

配置插件

    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。