一文带你掌握Vite 处理 Polyfill，从此大佬就是你

前端逗逗飞

发布于 2023-04-23 16:12:02

2.4K0

发布于 2023-04-23 16:12:02

文章被收录于专栏：前端逗逗飞前端逗逗飞

highlight: atelier-estuary-dark theme: channing-cyan

前言

当你吭哧吭哧完成业务开发,提交测试进入业务测试后，当测试人员跟你说"安卓手机白屏、ios白屏"，内心是不是崩溃的。

移动端产生白屏的原因大概率是JS高版本语法在低版本浏览器上不支持,例如:Promise.allSettled、Object.fromEntries、... ,那这种问题怎么处理呢。

如何才能知道,JS语法的兼容性呢通过can i use 查看JS/CSS语法,不兼容的浏览器版本
Promise.allSettled

Object.fromEntries

前端有很多构建工具 gulp、rollUp、weback、vite, 无论哪种构建工具,最终都是通过babel将高版本语法转换为低版本语法。

以下vite、webpack解决此类问题的方法

1.vite

虽然vite也可以通过babel的配置文件来解决这类问题，但vite好像更推荐插件 @vitejs/plugin-legacy 来解决问题。

      // ...other config
      legacyPlugin({
        targets: ['Chrome > 70', 'Safari  12.1', 'ios >= 12.3'],
        renderLegacyChunks: true,
        polyfills: ['es.promise.all-settled', 'es.object.entries'],
        modernPolyfills: ['es.promise.all-settled', 'es.object.entries']
      }),
       // ...other config

2.webpack

webpack解决这类的方式，很简单，就是配置babel.config.js(当然也可以配置.babel.rc)

module.exports = {
  plugins: [
     // ...other plugins
    '@babel/plugin-transform-runtime',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining'
  ]
}