vivo\oppo 手机出现 App 端内部分 H5 页面白屏

1、问题背景

在端内首页进入活动页等 H5 页面均白屏，出现白屏的手机型号集中在 oppo 和 vivo。

2、解决方式

经排查发如今出现问题的手机内会报 Uncaught SyntaxError: Unexpected token … js 的错误，发现是打包后的组件文件出现的错误，再次定位发现是 oppovivo 部分版本手机不兼容 ES6，出现问题的组件是 Swiper，发现页面内引入 Swiper 的方式为如下这种 npm 安装组件包的方式：

考虑到也许是这种引入方式致使在项目打包时没法处理 Swiper 组件的 ES6 语法致使的兼容问题，将引入方式换成如下这种方式引入：

成功解决了页面白屏的问题。（除此以外能够采用 cdn 的引用方式也能解决白屏问题。）

3、总结

低版本手机常常会出现语法不兼容问题，所以须要在项目中安装语法转换包，可是 babel 只负责语法转换，例如将 ES6 语法转换为 ES5，可是若是部分对象、方法、浏览器自己不支持，例如：

• 全局对象：Promise 等
• 全局静态函数：Array.from、Object.assign 等
• 实例方法：Array.prototype.includes 等

此时须要引入 babel-polyfill 来模拟实现这些对象、方法。

参考文档：

1. https://www.jianshu.com/p/ceb... 【解决问题】
2. https://qemcs.com/2018/03/17/...
3. https://www.cnblogs.com/mei12...
4. https://www.jianshu.com/p/a5e...