坑爹的 iOS 9：记一次 H5 白屏踩坑之旅

先说结论：iOS 9 的内置浏览器不支持 ES6 语法，而 babel-loader 中没配置相关规则，webpack 打包时，没有将 ES6 编写的文件转义，致使直接白屏不渲染。

原由

某天，客服群里反馈，App 内嵌的某个活动页，iOS 9 的用户打开白屏，而后测试说 PC 浏览器、自用的手机都能打开，因而理所固然的将锅甩给了原生同事。但随着问题的排查，发现 “锅” 愈来愈朝 Web 前端方向靠拢……

通过

项目信息：

vue: 2.5.13
webpack: 3.6.0
node: 11.13.0

Google 后说白屏是由于有 ES6 的语法在里面，我就很奇怪，都是统一打包的，并且以前也没有客服反馈这类问题。

查询了 iOS 9.0 的发布时间，目前使用的机型基本集中在 iPhone 5 到 6s plus 之间。

由于系统比较久远了，公司也没有相应的测试机。没有真机实在很差调试，因而回家翻出了我 7 年前买的 5s，庆幸的是，当时没有冒进，系统恰好在 9.3.4。

因而用真机打开页面，果真是白屏，链接 MacBook 用 Safari 调试，body 里除了 <div id="app"></div> 之外，其余什么都没有挂载上去。

因而和 iOS 的同事一块儿调试，用他们的 Xcode 看看能不能获得更多的信息，结果除了白屏，其余什么报错信息都没有。最最奇怪的是，都是内嵌页，有的能打开，有的却白屏。

而后在掘金中看到这篇文章，《记h5项目中在ios9白屏问题》，上面说是 babel-loader 没有将webpack-dev-server 下的 client/index.js 文件转义，可是仍是不能解释为啥有的页面能打开（都用的相同的打包配置），不过给我后来的分析问题提供了思路。

后来，他们又说，正式环境，除了反馈的那个页面，其余页面是均可以打开的，因而基本能够定位到是此次改版的某个地方出问题了。

因而，我回退到上一次发版的状态。将其中一个白屏的页面，单独打包到开发环境，竟然能访问，而后切回如今的版本，再打包，果真又白屏了。（咱们的 H5 内嵌页由于是大部分是运营活动，而活动和活动之间是没有太大联系的，因此这些活动页均可以拆分红一个个子项目，可单独打包替换）

我在另外一个目录下，从 git 从新拉了项目，而后回退到正常的版本，而后就挑那个活动页面，挨个比对，刚开始我觉得是 vant 版本问题，后面又觉得是 node 版本问题（以前是 node 8.11.4，我为了玩 NestJS，升到了 11.13.0），甚至把 less 改为了 scss（原来的是用 scss 写的）都无果。

正在抓狂之际，Axios 封装的文件里有一行吸引了我：

如上图，红框中的代码，是新增的，由于 PHP 那边要更换秘钥，区分开发和正式环境，因而我写了个公共秘钥文件，防止之后每次跟换秘钥，每个项目都要全量替换。

而后我又观察那些正常渲染页面的项目，共同点都是走的 Node 接口，因而问题基本定位到了。

把红框的注释掉，而后写死了 key，再打包，竟然又能够访问了。

固然，问题确定不是这个变量的问题，因而从新审视代码：

而后联想到以前 Google 的问题，会不会是这个文件没有被 babel-loader 转义成 ES5？

因而我去 webpack 的打包配置文件，在 plugins 的规则里加上了 resolve('config')，将这个目录添加至转义列表:

Ps: 那个 utils 可不用管，那是咱们本身封装的工具文件，正常使用 resolve() 便可。

结果

复原那个 apiKey，从新打包，果真又能访问了。

因此，问题的本质仍是 iOS 9 的浏览器不支持 ES6+ 语法（ iOS 9 如下的估计也会，但没真机，也很差下结论），表现形式就是直接白屏，任何错误信息都没有（用手机和电脑联调的 Safari 浏览器调试也没有）。

若是遇到相似的问题，能够先检查一下是否是项目的某个目录没有加入转义列表，再去寻找其余答案。

Safari 真不愧是移动端界的 IE。

`