{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-e7d05c8e5cce22efae461c705bb372f7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"最近答疑群里面有同学反馈说 G6 不支持 IE，官网上的 Demo 在 IE 上完全打不开，对于这样对问题，我们有考虑过怎么处理，最终没有选择内部处理，具体原因自行脑补。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":86,"offset":86},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":86,"offset":86},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"下面针对@vue/cli、umi、create-react-app搭建的项目给出一些解决方案，","position":{"start":{"line":4,"column":1,"offset":88},"end":{"line":4,"column":48,"offset":135},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"务必确保在没有引入 G6 时你的项目可以正常运行在IE上， **我相信如果项目框架是你自己搭建的，那么 IE 兼容性问题对你来说完全不是问题，","position":{"start":{"line":4,"column":50,"offset":137},"end":{"line":4,"column":121,"offset":208},"indent":[]}}],"position":{"start":{"line":4,"column":48,"offset":135},"end":{"line":4,"column":123,"offset":210},"indent":[]}},{"type":"text","value":"更确切的说应该是依赖的兼容性问题怎么解决**。","position":{"start":{"line":4,"column":123,"offset":210},"end":{"line":4,"column":146,"offset":233},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":88},"end":{"line":4,"column":146,"offset":233},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"类似如下错误。","position":{"start":{"line":6,"column":1,"offset":235},"end":{"line":6,"column":8,"offset":242},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":8,"offset":242},"end":{"line":6,"column":14,"offset":248},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572488463816-61bac7a7-9599-43b9-9871-84aa19c517f8.png#align=left&display=inline&height=462&name=9B7EDCB4-D317-4FB5-814D-68F58817ADD4.png&originHeight=462&originWidth=1974&search=&size=268517&status=done&width=1974","alt":"9B7EDCB4-D317-4FB5-814D-68F58817ADD4.png","position":{"start":{"line":6,"column":14,"offset":248},"end":{"line":6,"column":319,"offset":553},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":235},"end":{"line":6,"column":319,"offset":553},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#vuecli","title":null,"children":[],"data":{"hProperties":{"aria-label":"vuecli permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"vue/cli","position":{"start":{"line":8,"column":4,"offset":558},"end":{"line":8,"column":11,"offset":565},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":555},"end":{"line":8,"column":11,"offset":565},"indent":[]},"data":{"id":"vuecli","htmlAttributes":{"id":"vuecli"},"hProperties":{"id":"vuecli"}}},{"type":"paragraph","children":[{"type":"text","value":"本","position":{"start":{"line":10,"column":1,"offset":567},"end":{"line":10,"column":2,"offset":568},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/lxfu/vue-g6","children":[{"type":"text","value":"案例","position":{"start":{"line":10,"column":3,"offset":569},"end":{"line":10,"column":5,"offset":571},"indent":[]}}],"position":{"start":{"line":10,"column":2,"offset":568},"end":{"line":10,"column":38,"offset":604},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"是基于@vue/cli(V: 4.0.5)，如果你的版本是3.x的话可能写法上会有出入，@vue/cli怎么解决依赖兼容性问题呢？","position":{"start":{"line":10,"column":38,"offset":604},"end":{"line":10,"column":103,"offset":669},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":10,"column":103,"offset":669},"end":{"line":10,"column":109,"offset":675},"indent":[]}},{"type":"text","value":"遇到问题首先想到的是官网，没错，先看看","position":{"start":{"line":10,"column":109,"offset":675},"end":{"line":10,"column":128,"offset":694},"indent":[]}},{"type":"link","title":null,"url":"https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill","children":[{"type":"text","value":"官网","position":{"start":{"line":10,"column":129,"offset":695},"end":{"line":10,"column":131,"offset":697},"indent":[]}}],"position":{"start":{"line":10,"column":128,"offset":694},"end":{"line":10,"column":200,"offset":766},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"上有没有类似的教程，从官网上我们定位到浏览器兼容性，如下","position":{"start":{"line":10,"column":200,"offset":766},"end":{"line":10,"column":228,"offset":794},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":567},"end":{"line":10,"column":228,"offset":794},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572487613256-21bd4477-3bf7-4f0e-a016-6cfc88694796.png#align=left&display=inline&height=1434&name=7AEAC95F-6626-476E-8C63-830852883FC6.png&originHeight=1434&originWidth=2620&search=&size=1281163&status=done&width=2620","alt":"7AEAC95F-6626-476E-8C63-830852883FC6.png","position":{"start":{"line":12,"column":1,"offset":796},"end":{"line":12,"column":309,"offset":1104},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":796},"end":{"line":12,"column":309,"offset":1104},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"从文章中我们貌似已经找到了问题的答案，我们需要新建vue.config.js文件（和package.json同一目录），在里面添加transpileDependencies选项，","position":{"start":{"line":14,"column":1,"offset":1106},"end":{"line":14,"column":90,"offset":1195},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":1106},"end":{"line":14,"column":90,"offset":1195},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572487802971-7c772bc2-a319-4845-a28f-07617c9d9165.png#align=left&display=inline&height=642&name=6CDAA5DF-2206-4749-B5BD-C8EB3D13527D.png&originHeight=642&originWidth=1950&search=&size=289455&status=done&width=1950","alt":"6CDAA5DF-2206-4749-B5BD-C8EB3D13527D.png","position":{"start":{"line":16,"column":1,"offset":1197},"end":{"line":16,"column":306,"offset":1502},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":1197},"end":{"line":16,"column":306,"offset":1502},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"该选项默认值是[]，说明会忽略掉所有掉node","position":{"start":{"line":18,"column":1,"offset":1504},"end":{"line":18,"column":24,"offset":1527},"indent":[]}},{"type":"emphasis","children":[{"type":"text","value":"modules文件，不会对node","position":{"start":{"line":18,"column":25,"offset":1528},"end":{"line":18,"column":42,"offset":1545},"indent":[]}}],"position":{"start":{"line":18,"column":24,"offset":1527},"end":{"line":18,"column":43,"offset":1546},"indent":[]}},{"type":"text","value":"modules里面对文件做Babel，我们需要做的就是把我们希望Babel的文件加入即可，代码如下，需要注意的是我们加入的依赖","position":{"start":{"line":18,"column":43,"offset":1546},"end":{"line":18,"column":106,"offset":1609},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"不需要包含node_modules，用包名（","position":{"start":{"line":18,"column":108,"offset":1611},"end":{"line":18,"column":130,"offset":1633},"indent":[]}}],"position":{"start":{"line":18,"column":106,"offset":1609},"end":{"line":18,"column":132,"offset":1635},"indent":[]}},{"type":"text","value":"@antv/g6","position":{"start":{"line":18,"column":132,"offset":1635},"end":{"line":18,"column":140,"offset":1643},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"）即可","position":{"start":{"line":18,"column":142,"offset":1645},"end":{"line":18,"column":145,"offset":1648},"indent":[]}}],"position":{"start":{"line":18,"column":140,"offset":1643},"end":{"line":18,"column":147,"offset":1650},"indent":[]}},{"type":"text","value":"，因为@vue/cli会自动添加前缀node","position":{"start":{"line":18,"column":147,"offset":1650},"end":{"line":18,"column":169,"offset":1672},"indent":[]}},{"type":"emphasis","children":[{"type":"text","value":"modules。 还需要注意 @antv/g6必须和package.json里面的一致，安装依赖的时候首选npm，如果你用yarn、cnpm等安装，需要确保node","position":{"start":{"line":18,"column":170,"offset":1673},"end":{"line":18,"column":252,"offset":1755},"indent":[]}}],"position":{"start":{"line":18,"column":169,"offset":1672},"end":{"line":18,"column":253,"offset":1756},"indent":[]}},{"type":"text","value":"modules里面的包名没有被更改。","position":{"start":{"line":18,"column":253,"offset":1756},"end":{"line":18,"column":271,"offset":1774},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":1504},"end":{"line":18,"column":271,"offset":1774},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"module.exports = {\n transpileDependencies: ['@antv/g6'],\n};\n
","position":{"start":{"line":26,"column":18,"offset":1872},"end":{"line":26,"column":24,"offset":1878},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572488515498-453227ad-1602-4b33-a39b-8fe37ee561ad.png#align=left&display=inline&height=612&name=DF84211F-8B5E-4100-9048-86BB445DF28E.png&originHeight=612&originWidth=2192&search=&size=552053&status=done&width=2192","alt":"DF84211F-8B5E-4100-9048-86BB445DF28E.png","position":{"start":{"line":26,"column":24,"offset":1878},"end":{"line":26,"column":329,"offset":2183},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":1855},"end":{"line":26,"column":329,"offset":2183},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"最开始的那个报错解决了，但咋出现了新问题呢，别急，先用chrome浏览器看看，发现问题是一样的，添加完transpileDependencies兼容性问题是没有了，但出了个新错误。再次查看官网，并没有相关文章，那就直接移步issue吧，经过一番查找，我们找到如下解决方案，在babel.config.js里面添加上sourceType: \"unambiguous\"，具体含有可以官网查阅。","position":{"start":{"line":28,"column":1,"offset":2185},"end":{"line":28,"column":195,"offset":2379},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":2185},"end":{"line":28,"column":195,"offset":2379},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"module.exports = {\n sourceType: 'unambiguous',\n presets: ['@vue/cli-plugin-babel/preset'],\n};\n
","position":{"start":{"line":46,"column":204,"offset":3046},"end":{"line":46,"column":210,"offset":3052},"indent":[]}},{"type":"text","value":"eg:","position":{"start":{"line":46,"column":210,"offset":3052},"end":{"line":46,"column":213,"offset":3055},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":46,"column":213,"offset":3055},"end":{"line":46,"column":219,"offset":3061},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572489484918-5ee52fed-3ca9-434d-b7f9-ec153fdf6c21.png#align=left&display=inline&height=968&name=448C42C7-C55A-452E-847D-DC1C1F9955B1.png&originHeight=968&originWidth=1696&search=&size=640894&status=done&width=1696","alt":"448C42C7-C55A-452E-847D-DC1C1F9955B1.png","position":{"start":{"line":46,"column":219,"offset":3061},"end":{"line":46,"column":524,"offset":3366},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":2843},"end":{"line":46,"column":524,"offset":3366},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"当然，也许你想看看内部是怎么处理的，那就执行npm run eject 或 yarn run eject吧，这样就能暴露create-react-app的内置配置了，这个操作是不可逆的。 内置配置如下","position":{"start":{"line":48,"column":1,"offset":3368},"end":{"line":48,"column":101,"offset":3468},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":48,"column":101,"offset":3468},"end":{"line":48,"column":107,"offset":3474},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572491425327-f74942f3-fbbe-4982-8d35-f1f0d31a0f21.png#align=left&display=inline&height=1222&name=EA6D3C17-BD59-45CA-9B86-F581CCF278A3.png&originHeight=1222&originWidth=2002&search=&size=1155793&status=done&width=2002","alt":"EA6D3C17-BD59-45CA-9B86-F581CCF278A3.png","position":{"start":{"line":48,"column":107,"offset":3474},"end":{"line":48,"column":415,"offset":3782},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":3368},"end":{"line":48,"column":415,"offset":3782},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#umi","title":null,"children":[],"data":{"hProperties":{"aria-label":"umi permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"umi","position":{"start":{"line":51,"column":4,"offset":3788},"end":{"line":51,"column":7,"offset":3791},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":3785},"end":{"line":51,"column":7,"offset":3791},"indent":[]},"data":{"id":"umi","htmlAttributes":{"id":"umi"},"hProperties":{"id":"umi"}}},{"type":"paragraph","children":[{"type":"text","value":"如果你使用的是umi，再次恭喜你，umi不仅内置了依赖兼容性方案，而且配置简单，如果有任何问题，你可以在答疑群里面@云谦大佬。","position":{"start":{"line":53,"column":1,"offset":3793},"end":{"line":53,"column":64,"offset":3856},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":3793},"end":{"line":53,"column":64,"offset":3856},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"export default {\n browserslist: ['> 1%', 'last 2 versions'],\n};\n