1.背景：由于项目中有使用antv-x6框架，然后测试过程中在ie11打不开，

报错如下：

语法错误

查阅官网得知

ie11部分功能不支持

https://antv-g6.gitee.io/zh/docs/manual/FAQ/supportIE

参考antv-g6的兼容性文章修改，发现还是不行。

查阅网上资料得知

IE11兼容性问题总结如下三点：

1.ie11浏览器解析不了部分es6语法和api (解决方案：babel7+core-js3)

2.页面内引入的外链js兼容问题 （解决方案：外部转译处理 保证js引入顺序及ployfill处理）

3.babel默认不会转换node_modules中文件 （解决方案：vue-cli3.x通过transpileDependencies配置）

如最上图报错可知：报错文件中为@antv-x6里面文件中有语法错误，初步推断是兼容性问题

官网解决方案

使用此解决方案，发现不起作用，初步推断应该是第二种兼容性问题：页面内引入的外链js兼容问题中的顺序处理问题

可能直接导入的时候，即使也导入了polyfill，但是没能保证执行顺序

改成静态资源导入了，import不行，这个babel.js就是polyfill.js，一定要在x6的上面，不然也是不行

如上所示：成功解决兼容ie11问题

edge这样设置就可以打开ie了,这就是用edge打开ie模式，跟在ie浏览器看到的是一样的

排查语法兼容性

首先，让我们打开我们常用css和js兼容性检查平台https://caniuse.com/?search=es6,来看一下能否通过它来查到es6在IE11的兼容性情况。

果然，文案提示我们IE11对es6的语法支持有限,我们再来打开一下对es6详细语法/api有一个详细统计的github统计es6兼容性站点看一下：

解决方案：

初步方案：Babel7 + Core-Js3

1、引入babel7

需要注意的是，引入babel7之后，由于babel默认只转换js语法（如=>,class等），不转换新的api（比如：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法：Object.assign等），所以需要引入转换新api的工具/库。

2、引入core-js3

想要兼容/转换es6+的新api，就需要core-js3来支持了。

core-js可以有效支持promises、symbols、collections、iterators、typed arrays 、ECMAScript 7+ proposals、setImmediate等。

这里面有些需要注意的事项是，转换新api的方案叫做polyfill,babel-polyfill是兼容新版api的延续至近的一套方案，它内部引入了core-js2,又集成了regenerator-runtime,但是使用这套方案会把全部api特性都打包，会导致未使用的新api的引入及文件过大和全局污染。有没有可以按需加载的方案呢？答案是有：babel-runtime。

babel-runtime不同与babel-polyfill的是它可以结合babel插件babel-plugin-transform-runtime,按需引入babel-runtime中的polyfill，但是babel-runtime也有其缺点，它只支持静态方法，includes、Object.assign等实例下es6方法支持不足，解决这个问题就需要相应插件来支持了。

3、babel插件化

刚刚说到babel插件化，babel有很多解决特定问题的插件，比如：babel-plugin-array-includes 、@babel/plugin-transform-arrow-functions、 babel/plugin-proposal-class-properties等，但是这些插件如果一个一个引入也是很麻烦的，有没有可以一起引入所有插件的方法呢？

4、babel插件整合方案

最早期的插件整合方案常用的叫babel-preset-es2015,它解决了最早期es6特性的兼容性问题，但是随着es6+的各种特性的出现，后面由扩展出了babel-preset-stage-1、babel-preset-stage-2、babel-preset-stage-2、babel-preset-stage-3，具体差别和功能不做赘述，大家可以自行了解一下。随着以上方案的扩展，慢慢babel-preset-es2015需要一个最新的集成方案，于是就有了babel-preset-env，就是那个每次npm安装babel-preset-2015时都提醒我们的babel-preset-env安装提醒，它可以根据目标浏览器或者运行环境配置来自动转换es2015+的代码。

5、babel配置

关于babel配置，vue项目中有很多地方都可以配置处理，如packge.json、babel.config.js、.babelrc、.browserlistrc。大家根据实际情况配置和查看相应文件里面的配置。

这里面需要注意的是，从babel7开始，.babelrc的作用范围仅限于当前项目，默认不再作用于 node_modules 和工作区 (./packages/*)，如果需要，可以指定作用范围。一般通过babel.config.js和.browserlistrc来做babel的转译处理了。具体的配置，这里不做详细解读了，官网有比较详细的解释：https://www.babeljs.cn/docs/config-files。

初步成果

通过以上相关的引入和配置，项目内的es6+代码转换没有问题了，但是还是遗留了两个新的问题：

1、页面内引入的外链js的兼容问题怎么办？

2、项目引入的外部模块的es6+代码的转换怎么办？

完善方案

首先，对于第一个问题，如果有操作权限的话可以通过外部项目js的转译处理，如果没有权限的情况下，保证项目js引入的顺序，确保在存在外部es6+特性代码的js之前实现polyfill的注册兼容处理，比如可以在html中实现includes的定义等。

其次，对于第二个问题，由于babel默认不会转换node_modules中的文件，需要我们针对处理。

对于vue-cli3之前或者webpack项目中，可以结合includes、excludes的优先级顺序，配置需要在项目中需要转译的外部包；对于vue-cli3.x之后的项目可以通过配置vue.config.js中的transpileDependencies属性来实现对外部包的转译处理，这里可以看一下vue官网对它的一个简单解释：https://cli.vuejs.org/zh/config/#runtimecompiler