IE 頁(yè)面空白
報(bào)錯(cuò)信息
此時(shí)頁(yè)面一片空白
報(bào)錯(cuò)原因
Babel 默認(rèn)只轉(zhuǎn)換新的 JavaScript 語(yǔ)法（如箭頭函數(shù)），而不轉(zhuǎn)換新的 API 昔穴，比如 Iterator镰官、Generator、Set吗货、Maps泳唠、Proxy、Reflect宙搬、Symbol笨腥、Promise 等新的對(duì)象或者方法勇垛。
例如 Promise 脖母、新的原生方法如 String.padStart (left-pad) 等。為了解決這個(gè)問(wèn)題闲孤，我們使用一種叫做 Polyfill（代碼填充谆级，也可譯作兼容性補(bǔ)丁）的技術(shù)讼积。
簡(jiǎn)單的說(shuō)肥照，兼容問(wèn)題一般是IE 對(duì)于es6 的部分新對(duì)象、表達(dá)式币砂，語(yǔ)法并不支持建峭，解決方案是使用 babel-polyfill 來(lái)正常使用ES6。
Polyfill 是什么
舉個(gè)例子决摧，有些舊瀏覽器不支持 Number.isNaN方法亿蒸，Polyfill就可以是這樣的：
if(!Number.isNaN) {
Number.isNaN = function(num) {
return(num !== num);
}
}
Polyfill就是類似這樣解決API的兼容問(wèn)題
解決方案
1、使用babel-polyfill
引入 babel-polyfill
npm i -S babel-polyfill
如何使用
使用它時(shí)需要在你應(yīng)用程序的入口點(diǎn)頂部或打包配置中引入掌桩。
在main.js 引入
import 'babel-polyfill'
或者在config中的 webpack.base.conf.js中 修改配置
entry:{
app:['babel-polyfill','./src/main.js']
}
2边锁、在index.html 加入以下代碼（非必須）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3、babel-loader 中指定模塊轉(zhuǎn)碼
增加了poly-fill還是報(bào)錯(cuò)波岛，這一般是使用了第三方的ui框架茅坛、庫(kù)、插件等则拷，并且這些ui框架贡蓖、庫(kù)、插件底層有es6的語(yǔ)法煌茬。
找到webpack.base.conf.js 中的babel-loader
比如我這里用了element-ui 跟 v-charts 修改成如下：
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
resolve('node_modules/v-charts/src'),
resolve('node_modules/vue-awesome'),
resolve('node_modules/element-ui/packages'),
resolve('node_modules/element-ui/src')
]
}
4斥铺、打包問(wèn)題
如果是webpack代碼打包出錯(cuò)，一般到 github webpack Issues中可以找到答案
這個(gè)錯(cuò)誤是因?yàn)閣ebpack-dev-server 版本問(wèn)題
5坛善、Babel 配置 .babelrc文件
.babelrc是Babel的配置文件晾蜘，放在項(xiàng)目根目錄下邻眷。一般情況下.babelrc文件不需要修改，如果以上都做了剔交，還是報(bào)錯(cuò)肆饶，可以看下官網(wǎng)文檔來(lái)配置下該文件
在項(xiàng)目使用 vue-cli 生成的代碼中，根目錄有一個(gè) .babelrc 文件岖常。在默認(rèn)生成的模板內(nèi)容中驯镊，增加"useBuiltIns": "entry"，這是一個(gè)指定哪些內(nèi)容需要被 polyfill(兼容) 的設(shè)置
useBuiltIns有三個(gè)設(shè)置
- false - 不做任何操作
- entry - 根據(jù)瀏覽器版本的支持腥椒，將 polyfill 需求拆分引入阿宅，僅引入有瀏覽器不支持的polyfill
- usage - 檢測(cè)代碼中 ES6/7/8 等的使用情況，僅僅加載代碼中用到的 polyfill
{
"presets": [
["env", {
"modules": false,
"useBuiltIns": "entry"
}],
"stage-2"
],
"plugins": ["transform-runtime", "transform-vue-jsx"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
具體相關(guān)可以查看Babel官網(wǎng)：https://www.babeljs.cn/
總結(jié)
1笼蛛、用vue 寫的項(xiàng)目最多可以兼容到IE9 及以上版本
2洒放、使用babel-polyfill
3、在babel-loader中指定需要轉(zhuǎn)碼的第三方的ui框架滨砍、庫(kù)往湿、插件路徑
4、配置 .babelrc文件
5惋戏、Babel 是一個(gè)厲害的東西https://www.babeljs.cn/
補(bǔ)充：
問(wèn)題：ie瀏覽器autoprefixer自動(dòng)補(bǔ)全css前綴無(wú)效
解決方法：
ie發(fā)現(xiàn)使用內(nèi)聯(lián)樣式领追，autoprefixer無(wú)法生效，所以需要寫到style標(biāo)簽內(nèi)响逢。
問(wèn)題：ie10打開(kāi)包語(yǔ)法錯(cuò)誤绒窑，如圖所示
解決方法
點(diǎn)擊app.js,跳轉(zhuǎn)到報(bào)錯(cuò)的位置，如圖
發(fā)現(xiàn)最后一行有個(gè)import的文件舔亭，所以鎖定到錯(cuò)誤肯定是在引入的這個(gè)文件內(nèi)些膨。
把common.js打開(kāi)，檢查語(yǔ)法钦铺，發(fā)現(xiàn)有個(gè)變量定義用了ES6的語(yǔ)法let订雾。所以引入的文件，插件沒(méi)有起作用矛洞。
沒(méi)有將ES6轉(zhuǎn)ES5洼哎。然后修改了之后，問(wèn)題解決沼本。
以上就是本文的全部?jī)?nèi)容噩峦，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家抽兆。
