在ES6模块中使用graphviz

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和Angular运行相关的各种问题，但仍然无法弄清楚。

我已经尝试加载unpkg在我的HTML文件，但然后我的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文件复制到公共文件夹中。

在@hpc -js/wasm端查看"wasmFolder"因为它可以让你覆盖默认位置。