提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

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

处理 掌握 一文 就是 大佬 vite 从此
2023-06-13 09:18:49 时间
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'
  ]
}

最后

此类文档会持续更新

@vitejs/plugin-legacy官方文档

重点段落

相关文章