在ES6模块中使用图

Question

当我试图在ES6模块中加载graphviz时，我会得到关于.wasm的错误

(index):284          GET https://anki.wip/build/graphvizlib.wasm 404

__webpack_require__.O @ chunk loaded:23
(anonymous) @ app.scss?8f59:1
webpackJsonpCallback @ jsonp chunk loading:72
(anonymous) @ app.js:1
index.js:184 Aborted(both async and sync fetching of the wasm failed)
abort @ index.js:184
getBinary @ index.js:184

我的设置很简单，尽管我尝试过许多不同的方法

yarn add d3-graphviz
# installs d3-graphviz@4.1.1

然后在我的js文件里

import { graphviz }  from 'd3-graphviz';
graphviz('#test')
    .fade(false)
    .renderDot('digraph {a -> b}');

我已经阅读并重新阅读了https://github.com/magjac/d3-graphviz/issues/152上的github问题，以及与Vue和re一起运行它的各种问题，但仍然无法解决。

我尝试在我的HTML文件中加载unpkg，但是我的javascript模块无法访问graphviz。

    <script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
    <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
    <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
    <script src="//d3js.org/d3.v5.min.js"></script>

有什么想法吗？

Answer 1

基本上，您需要将wasm文件视为任何“静态资产”(如png或jpeg)。根据浏览器默认查找文件的位置，最快的解决方案是简单地将wasm文件复制到您的公用文件夹中。

在@hpcc/wasm端，查看这里的"wasmFolder“文档：https://github.com/hpcc-systems/hpcc-js-wasm#wasmFolder，因为它将允许您覆盖默认位置。