解决antv x6 树形图在IE浏览器的兼容性问题(已兼容IE9及以上)。

发布时间 2023-04-12 17:21:24作者: Hi,虫

因为是给老项目做的树形图展示,框架比较老,使用了传统的html+js代码开发。使用了antv x6 来渲染一颗多级树形结构的图,开发完后在firefox、edge、chrome等现代浏览器上均可正常显示。但甲方客户想在ie浏览器上也能用,所以做了以下尝试,通过不断摸索、调试的艰难过程,终于大功告成。
由于我写的代码里只引用了两个antv x6的js,考虑将这两个js中的高级es6语法和函数转化成低级(es5),以兼容浏览器。自己写的代码,就有几处()=>写法需要改,手动处理掉了。两个外部引入的antv js使用手动处理的方式就不太现实了,这时想寻求工具的帮助,百度找到一个解决方案,使用babel工具来转,参考链接:https://www.cnblogs.com/chinasoft/p/17005411.html
1、将外部引入的js使用工具把es6语法转为es5,使用babel的操作过程如下:
创建一个文件夹叫babel,在文件夹内创建一个index.js文件并写入es6语法代码:

let a = item => item + 2
console.log(a(4))

这个文件是一个 ES6 语法 的 js 文件,稍后,我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。
在当前目录初始化一个简单项目

npm init -y

安装 babel-preset-es2015 和 babel-cli:

npm install --save-dev babel-preset-es2015 babel-cli

命令执行完成后,会在项目的根目录下生成 package.json 文件:

{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

然后在文件package.json中修改scripts中的内容:

"scripts": {
  "test": "babel index.js -o es5index.js"
},

开始转换

npm run test

然后可以看到同目录下生成了es5的文件es5index.js,这样就可以在html代码引用es5的js了,两个antv x6的js都用以上方案转化。

2、以上转化为es5后,页面加载还是报错,通过检索资料,又尝试添加两个babel js:

<!-- 解决:ie兼容es6语法 -->
<script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.js"></script>
<!-- 解决:ie兼容es6语法 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise-polyfill@1.2.0/dist/polyfill.min.js"></script>

3、又报错“对象不支持“flat”属性或方法”,参考https://bbchin.com/archives/flat-fix自定义了flat函数,注意此函数也要使用步骤1的方式转为es5代码。然后添加到项目中

<!-- 解决:ie丢失flat函数问题 -->
<script src="./flat.js"></script>

至此,大功告成。可以兼容ie9及以上浏览器了。