Iview Bable polyfill 詳解Vue iview IE瀏覽器不兼容報(bào)錯(cuò)

由于Iview編譯使用到了es6的一些新特性， Internet Explorer所有版本中都會(huì)報(bào)錯(cuò)，缺少includes、findIxdex等問(wèn)題。
本人研究涉及到的環(huán)境：VueCli3.2iview 3.1.5

在IE中不支持ES6的新特性，例如：includes、findIndex……
以下方案可以解決該問(wèn)題：
1.Github iview倉(cāng)儲(chǔ)Issues中提到的
改編譯范圍請(qǐng)用 transpileDependencies: [‘iview']，不要用 include.add，因?yàn)槟J(rèn)配置里用了 exclude，在 webpack 中，多個(gè)條件同時(shí)存在時(shí)需要每個(gè)條件都滿足才執(zhí)行 rule 。

但是加了這個(gè)選項(xiàng)后在所有瀏覽器里都會(huì)報(bào)錯(cuò)，因?yàn)?iView 里這個(gè)文件不兼容 ES Module 。該文件是用很舊版本的 UMD 格式打包的，新版本 UMD 修復(fù)了報(bào)錯(cuò)的問(wèn)題，但沒(méi)有解決和 ES Module 互操作的問(wèn)題。在 Webpack 4 中，ES Module 不能和 CommonJS / UMD 混用。

所以這里本質(zhì)上是 iView 對(duì) Webpack 4 支持的問(wèn)題，讓他們把源碼全部轉(zhuǎn)成 ES Module 就好了。
在vue.config.js中添加transpileDependencies: [‘iview']后，可以讓bable編譯過(guò)程中檢查iview的代碼，自動(dòng)添加代碼中用到的polyfill 。
但是由于iview中有一個(gè)文件使用的UMD打包，所以編譯后的代碼還是在運(yùn)行環(huán)境中報(bào)錯(cuò)，導(dǎo)致項(xiàng)目無(wú)法使用。
該方案雖然解決了ES6語(yǔ)法問(wèn)題，但是實(shí)際使用會(huì)報(bào)錯(cuò) 。
2.直接給代碼添加polyfill
修改bable.config.js使用 useBuiltIns: ‘entry'

在Vue入口文件main中導(dǎo)入bable的polyfill

這種方案bable編譯時(shí)，會(huì)自動(dòng)導(dǎo)入目標(biāo)瀏覽器（browserslist中配置）需要用到的polyfill,可以保證全局代碼使用都可以新ES代碼。但是，也許有些polyfill會(huì)一直用不到，額外增加了編譯后的文件體積。
3.使用balbe env，預(yù)置iview中所需要的polyfill（推薦做法）
修改bable.config.js 添加預(yù)導(dǎo)入的polyfill 。目前我的項(xiàng)目中用到的polyfill有'es6.promise'，‘es6.array.find-index' ， ‘es7.array.includes'，‘es6.string.includes'

這種方案依然使用Vue項(xiàng)目默認(rèn)方案，不同的是在項(xiàng)目編譯時(shí)，會(huì)導(dǎo)入polyfills中指定的polyfill，這樣既可解決iview在ie中運(yùn)行報(bào)錯(cuò)的問(wèn)題。
【Iview Bable polyfill 詳解Vue iview IE瀏覽器不兼容報(bào)錯(cuò)】上面中是我目前用到的幾polyfill ，如果需要其它鋪墊，可以自行添加。