AntV G6 项目如何兼容 IE 阿里的 AntV G6 是很强大很好用，但要兼容 IE 会遇到各种 坑。虽然官网给出了 解决方案 ，但因为原因千奇百怪，即使完全照官方的方案操作一遍，仍然有问题。本文如果能帮到同学少踩坑，那就不枉我花二个小时来总结了。本文仅以 Vue Vue CLI 工程为例讲解。vue-g6-editor曾经用官方推荐的 基于 G6 和 Vue 的可视化编辑器 做了一个场景编辑器，测试不能兼容 IE，报如下错误：点击错误行进去排查，发现 @antv/g/src/core/event-emitter.js 中有个方法里面有 const 关键字，如下图：Vue CLI v3 以上版本使用 core-js 基本上解决了大部分的 IE 兼容问题，但不少第三方库（node_modules 中）将 es6 语句转换成 es5 时做得不彻底，无形中会引入新的 IE 兼容问题。一般的 webpack Vue CLI 工程为了编译得快，默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果想要通过 Babel 显式转译一个依赖，可以在 transpileDependencies 选项中列出来，然后在使用工程中再转换。明白了这个道理就比较好解决问题了。transpileDependencies: ["@antv/g", "@antv/g6"]注意：3.2.10 以下版本的 @antv/g 跑这个示例都必须设置 @antv/g 依赖项。3.2.10~3.8.5 版本的可以不用额外加依赖项，但要相应修改示例代码中的一些依赖包路径才能跑起来X-Flowchart-Vue 该项目 的示例有些 Viso 的味道，画流程图爽歪歪，文档很 Nice，不足的是包太大了。测试了一下该示例不能兼容 IE。因为该工程根本没有设置 transpileDependencies，如下设置就可以了：transpileDependencies: ["@oxoyo/xfc"]注意：示例工程依赖，@oxoyo/xfc，后者依赖 @antv/g6，通常在 transpileDependencies 添加的是直接依赖。普通工程普通的 Vue CLI + @antv/g6 工程有没有兼容 IE 问题呢？经我测试，@antv/g6 4.0.4 以上版本不能兼容 IE，会报如下错误：My God，新版竟然用了 Proxy 。一步步排查发现在 @antv/layout/es/layout/layout.js// FIXME // FOR G6 export const Layouts = new Proxy({}, { get: (target, propKey) => { return getLayoutByName(propKey); }, set: (target, propKey, value) => { registerLayout(propKey, value); return true; } });阿里的前端同学也不容易，对不对?。没办法，既然用了 Proxy，就等于放弃 IE 了。所以如果一定要支持 IE, @antv/g6 的版本最好是 3.1.0~4.0.4。由于 3.1.0 以下版本改动太大，不推荐使用。总结结合工作实践，总结一下解决兼容 IE 的办法：低版本 Vue CLI 工程，检查有没有配置 babel-plugin-transform-runtime/babel-polyfill；高版本 Vue CLI 工程，检查有没有配置 core-js；高版本 Vue CLI 工程，想一想要不要配置 transpileDependencies，本文中的 @antv/g6，还有经常用到的vue-echarts、vue-baidu-map，都需要设置相应 transpileDependencies；最后考虑要不要降级依赖的第三方库。高版本的 @antv/g6 和 swiper都不能兼容 IE，降级后可以兼容。有同学可能会说，微软都放弃 IE 转向 Edge 了吗？花那么多精力搞 IE 兼容干什么呢？说实话，我也盼望 IE 早点退出历史舞台。但事实上，客户说一定要支持 IE，老板产品说一定要支持 IE，有什么办法呢？

Webpack 分块优化 从 Webpack v4 开始，移除了CommonsChunkPlugin，取而代之的是SplitChunks。最初，chunks（以及内部导入的模块）是通过内部 Webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。

使用 transform-runtime 上一次我们给大家介绍了怎样使用 babel-polyfill。只要引入这个插件就能就很好地兼容IE浏览器了，但是这会导致最终的打包文件偏大，即使打开了 useBuiltIns，效果也不明显。作为有追求的前端工程师，要对代码质量及性能比较高的要求。前期开发赶进度也就罢了，上生产前一定要花时间优化。本文我们就来介绍 transform-runtime。

使用 babel-polyfill 今天写代码真是行云流水，很快就搞完了，马上提交。下午测试告诉我，不能兼容 IE 浏览器。这不打开就是空白，F12 进去跳出一个醒目的错误：出错：[vuex] vuex requires a Promise polyfill in this browser.这不是 Vue 的锅，React 应用也会遇到兼容 IE 浏览器的问题。百度了一下，很快找到解决方案。只要在入口文件添加引入 babel-polyfill 就搞定了。出于好奇，我下午抽时间仔细研究了一下 babel。

开发在线文本编辑器 最近用到百度的UEdior，觉得好强大，看了下它的源码，想想自己该怎样开发一个在线文本编辑器。如果不考虑兼容IE8之类的老浏览器，使用HTML5之后被各个浏览器广泛支持的一些技术方法来开发也没有想像的那么难。