之前公司在開始專案之前並沒有考慮到跨瀏覽器問題,先是在 Safari 上遇到 CSS 不相容問題,現在又遇到要在 Android 4.0 的系統上運行網頁。同樣的也是如同 CSS 不相容時的狀況,開啟網頁後一片全白的狀況。
框架介紹
解決
首先排除掉 CSS 不相容後,遇到個困難是要如何印出 error message。最後是在 index.ejs 最上面使用 window.onerror 來印出 error message。
最後印出 Uncaught ReferenceError: Set is not defined
,通常是在無法識別 ES6 的語法時才會出現,而這可以使用 babel-polyfill 解決。但是我已經在 index.js 最上面 import @babel/polyfill
,也因此我嘗試在其他地方引入 babel-polyfill。
最後是在 .webpack.rc.js 的 entry 中配置 babel-polyfill,詳細情況如該 issue。
心得
目前是還在尋找為什麼 import @babel/polyfill
沒有發揮作用,不過專案最後還是成功運行在 Android 4.0 上。