坑爹的 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。

`