Vue iview IE浏览器不兼容报错（Iview Bable polyfill）

????????因为Iview编译使用到了es6的少量新特性，Internet Explorer所有版本中都会报错，缺少includes、findIxdex等问题。

? ? ? 本人研究涉及到的环境：VueCli3.2 + iview 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’

module.exports = {presets: [? ? [‘@vue/app’, {useBuiltIns:’entry’}? ? ]? ]}

??在Vue入口文件main中导入bable的polyfill

import’@babel/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’

module.exports = { presets: [? ? [‘@vue/app’, {

? ? ? ? ? ? ?debug:true,

? ? ? ? ? ? ?polyfills: [ ‘es6.promise’ , ‘es6.array.find-index’ , ‘es7.array.includes’ , ‘es6.string.includes’ ]?

? ? }? ? ]? ]}

??这种方案仍然使用Vue项目默认方案，不同的是在项目编译时，会导入polyfills中指定的polyfill，这样既可处理iview在ie中运行报错的问题。

??上面中是我目前用到的几polyfill，假如需要其它铺垫，可以自行增加。

? ? ? ?（本文原发布于我的个人博客?http://31023.xyz/p/f9bff209de）