因为是给老项目做的树形图展示，框架比较老，使用了传统的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及以上浏览器了。
