釘釘自帶瀏覽器版本過低,導致Object.assign不兼容...
最近做了一個移動端項目,提前做完了,上線以後各種沒問題,各種瀏覽器都完美棒棒噠,終於可以給自己加一個雞腿了。
But,PM有天給我說,咳咳,為什麽頁面少了一部分??
說我的一臉懵逼,然後拿給我看,在釘釘打開項目的地址,頁面確實少了一部分,點擊各種按鈕,皆無提示,看來應該是報錯了。
但是iPhone的釘釘是OK,看來問題出現在安卓版的釘釘上。
先定位一下問題,檢測了一下安卓版釘釘瀏覽器的內核版本,WTF,竟然是Chrome40, 內心一萬匹草泥馬呼嘯而過。
然後把頁面放到Chrome40上,emmmm, 他喵的竟然不認識 Object,.assign 。真是喵了個喵的。
好了,問題找到,就解決吧。
Babel默認只轉換新的JavaScript句法(syntax),而不轉換新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象,以及一些定義在全局對象上的方法(比如Object.assign)都不會轉碼。舉例來說,ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行,必須使用babel-polyfill,為當前環境提供一個墊片。
Babel默認不轉碼的API非常多,詳細清單可以查看babel-plugin-transform-runtime模塊的definitions.js文件。
解決方案:
首先,使用 node 安裝 *babel-polyfill 命令*
npm install --save-dev -polyfill
解決方案1:在 webpack.config.js 文件中,entry 入口處修改,加入即可
"babel-polyfill":"babel-polyfill",//用來解決的兼容性
例如:
entry: {
"babel-polyfill":"babel-polyfill",//用來解決兼容性
app: path.resolve(__dirname, config.entry.module + "/app.js"),
vendor: config.entry.vendor
},
解決方案2:不修改webpack的情況下,在你的主入口文件頭部加入,例如:app.js中加入即可
import ‘babel-polyfill‘ 或者 require(‘babel-polyfill‘);
例如:
import ‘babel-polyfill‘
import Vue from ‘vue‘;
Vue.config.debug = true;
如果嫌引入babel-polyfill太大,人家還提供了單項的polyfill,比如說我就只用到Object.assign和promise的,詳情看這裏
釘釘自帶瀏覽器版本過低,導致Object.assign不兼容...