@antv/g6
Version:
graph visualization frame work
1 lines • 10.1 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-e7d05c8e5cce22efae461c705bb372f7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>最近答疑群里面有同学反馈说 G6 不支持 IE，官网上的 Demo 在 IE 上完全打不开，对于这样对问题，我们有考虑过怎么处理，最终没有选择内部处理，具体原因自行脑补。</p>\n<p>下面针对@vue/cli、umi、create-react-app搭建的项目给出一些解决方案，<strong>务必确保在没有引入 G6 时你的项目可以正常运行在IE上， **我相信如果项目框架是你自己搭建的，那么 IE 兼容性问题对你来说完全不是问题，</strong>更确切的说应该是依赖的兼容性问题怎么解决**。</p>\n<p>类似如下错误。<br /><img src=\"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\"></p>\n<h2 id=\"vuecli\"><a href=\"#vuecli\" aria-label=\"vuecli permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>vue/cli</h2>\n<p>本<a href=\"https://github.com/lxfu/vue-g6\" target=\"_self\" rel=\"nofollow\">案例</a>是基于@vue/cli(V: 4.0.5)，如果你的版本是3.x的话可能写法上会有出入，@vue/cli怎么解决依赖兼容性问题呢？<br />遇到问题首先想到的是官网，没错，先看看<a href=\"https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill\" target=\"_self\" rel=\"nofollow\">官网</a>上有没有类似的教程，从官网上我们定位到浏览器兼容性，如下</p>\n<p><img src=\"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\"></p>\n<p>从文章中我们貌似已经找到了问题的答案，我们需要新建vue.config.js文件（和package.json同一目录），在里面添加transpileDependencies选项，</p>\n<p><img src=\"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\"></p>\n<p>该选项默认值是[]，说明会忽略掉所有掉node<em>modules文件，不会对node</em>modules里面对文件做Babel，我们需要做的就是把我们希望Babel的文件加入即可，代码如下，需要注意的是我们加入的依赖<strong>不需要包含node_modules，用包名（</strong>@antv/g6<strong>）即可</strong>，因为@vue/cli会自动添加前缀node<em>modules。 还需要注意 @antv/g6必须和package.json里面的一致，安装依赖的时候首选npm，如果你用yarn、cnpm等安装，需要确保node</em>modules里面的包名没有被更改。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n transpileDependencies<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'@antv/g6'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>好了，我们打开IE11看看结果吧。<br /><img src=\"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\"></p>\n<p>最开始的那个报错解决了，但咋出现了新问题呢，别急，先用chrome浏览器看看，发现问题是一样的，添加完transpileDependencies兼容性问题是没有了，但出了个新错误。再次查看官网，并没有相关文章，那就直接移步issue吧，经过一番查找，我们找到如下解决方案，在babel.config.js里面添加上sourceType: \"unambiguous\"，具体含有可以官网查阅。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n sourceType<span class=\"token punctuation\">:</span> <span class=\"token string\">'unambiguous'</span><span class=\"token punctuation\">,</span>\n presets<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'@vue/cli-plugin-babel/preset'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>再次编译，</p>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/278352/1572488965455-b993c651-c934-4db9-bef7-ddb3430b52be.png#align=left&display=inline&height=920&name=F4680A19-5EB7-43DE-97C0-E86CAB824973.png&originHeight=920&originWidth=2874&search=&size=419213&status=done&width=2874\" alt=\"F4680A19-5EB7-43DE-97C0-E86CAB824973.png\"></p>\n<p>到此，完美解决问题。</p>\n<h2 id=\"create-react-app\"><a href=\"#create-react-app\" aria-label=\"create react app permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>create-react-app</h2>\n<p>如果你使用create-react-app(V: 3.0.0)初始化项目，那么恭喜你，create-react-app已经内置了依赖兼容性的处理方案，你只需要配置项目自身的兼容性问题即可，配置有多种方式，可<a href=\"https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers\" target=\"_self\" rel=\"nofollow\">参考</a>。<br />eg:<br /><img src=\"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\"></p>\n<p>当然，也许你想看看内部是怎么处理的，那就执行npm run eject 或 yarn run eject吧，这样就能暴露create-react-app的内置配置了，这个操作是不可逆的。 内置配置如下<br /><img src=\"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\"></p>\n<h2 id=\"umi\"><a href=\"#umi\" aria-label=\"umi permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>umi</h2>\n<p>如果你使用的是umi，再次恭喜你，umi不仅内置了依赖兼容性方案，而且配置简单，如果有任何问题，你可以在答疑群里面@云谦大佬。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n browserslist<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'> 1%'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'last 2 versions'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}