Iview Bable polyfill 详解Vue iview IE浏览器不兼容报错

由于Iview编译使用到了es6的一些新特性， Internet Explorer所有版本中都会报错，缺少includes、findIxdex等问题。
本人研究涉及到的环境：VueCli3.2iview 3.1.5

在IE中不支持ES6的新特性，例如：includes、findIndex……
以下方案可以解决该问题：
1.Github iview仓储Issues中提到的
改编译范围请用 transpileDependencies: [‘iview'] ，不要用 include.add ，因为默认配置里用了 exclude ，在 webpack 中，多个条件同时存在时需要每个条件都满足才执行 rule 。

但是加了这个选项后在所有浏览器里都会报错，因为 iView 里这个文件不兼容 ES Module 。该文件是用很旧版本的 UMD 格式打包的，新版本 UMD 修复了报错的问题，但没有解决和 ES Module 互操作的问题。在 Webpack 4 中， ES Module 不能和 CommonJS / UMD 混用。

所以这里本质上是 iView 对 Webpack 4 支持的问题，让他们把源码全部转成 ES Module 就好了。
在vue.config.js中添加transpileDependencies: [‘iview']后，可以让bable编译过程中检查iview的代码，自动添加代码中用到的polyfill 。
但是由于iview中有一个文件使用的UMD打包，所以编译后的代码还是在运行环境中报错，导致项目无法使用。
该方案虽然解决了ES6语法问题，但是实际使用会报错。
2.直接给代码添加polyfill
修改bable.config.js使用 useBuiltIns: ‘entry'
【Iview Bable polyfill 详解Vue iview IE浏览器不兼容报错】

文章插图
在Vue入口文件main中导入bable的polyfill

文章插图
这种方案bable编译时，会自动导入目标浏览器（browserslist中配置）需要用到的polyfill,可以保证全局代码使用都可以新ES代码。但是，也许有些polyfill会一直用不到，额外增加了编译后的文件体积。
3.使用balbe env ，预置iview中所需要的polyfill（推荐做法）
修改bable.config.js 添加预导入的polyfill 。目前我的项目中用到的polyfill有'es6.promise' ， ‘es6.array.find-index' ， ‘es7.array.includes' ， ‘es6.string.includes'