AntV G6项目如何兼容IE

无忧前端
2,029 阅读3分钟

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

阿里的AntV G6是很强大很好用，但要兼容IE会遇到各种坑。虽然官网给出了解决方案，但因为原因千奇百怪，即使完全照官方的方案操作一遍，仍然有问题。本文如果能帮到同学少踩坑，那就不枉我花二个小时来总结了。本文仅以Vue cli工程为例讲解。

vue-g6-editor

曾经用官方推荐的基于G6和Vue的可视化编辑器做了一个场景编辑器，测试不能兼容IE，报如下错误：

g6-editor-error.png

点击错误行进去排查，发现 @antv/g/src/core/event-emitter.js中有个方法里面有const关键字，如下图：

const-error.png

Vue cli3以上版本使用core-js基本上解决了大部分的IE兼容问题，但不少第三方库（node_modules中）将es6语句转换成es5时做得不彻底，无形中会引入新的IE兼容问题。一般的webpack 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，会报如下错误：

proxy-error.png

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的办法：

  1. 低版本cli工程，检查有没有配置babel-plugin-transform-runtime/babel-polyfill；
  2. 高版本cli工程，检查有没有配置core-js；
  3. 高版本cli工程，想一想要不要配置transpileDependencies，本文中的 @antv/g6，还有经常用到的vue-echarts、vue-baidu-map，都需要设置相应的transpileDependencies；
  4. 最后考虑要不要降级依赖的第三方库。高版本的 @antv/g6和swiper都不能兼容IE，降级后可以兼容。

有同学可能会说，微软都放弃IE转向Edge了吗？花那么多精力搞IE兼容干什么呢？说实话，我也盼望IE早点退出历史舞台。但事实上，客户说一定要支持IE，老板产品说一定要支持IE，有什么办法呢？

avatar
文章
阅读
粉丝