webassembly - 如何在 Vite 中使用嵌入式 Webassembly？

Question

我想使用这个很棒的包:https://github.com/hpcc-systems/hpcc-js-wasm它将 Webassembly (graphizlib.wasm) 与要使用的 Javascript 函数捆绑在一起。我将它添加为 package.json 中的依赖项。

  "dependencies": {
    "@hpcc-js/wasm": "^1.13.0"
  },

当我现在运行 Vite 开发服务器时，Javascript 代码很容易找到。但是 wasm 不可用。特别是，我收到此错误消息:

加载资源失败:服务器响应状态为 404(未找到)http://localhost:3000/graphvizlib.wasm

我不确定如何为我的站点提供嵌入式 Web 程序集。它在依赖包中。请参阅@hpcc-js/wasm/dist 文件夹中的 node_modules (#2) 中的#1 (#3)

我也尝试过使用 Vite 的构建配置 - 无法访问。

Answer 1

基本上，您需要像对待任何“静态 Assets ”(如 png 或 jpeg)一样对待 wasm 文件。根据浏览器默认查找文件的位置，最快的解决方案是简单地将 wasm 文件复制到您的公共(public)文件夹。

如果失败，您可以在此处查看 Vite 文档:https://vitejs.dev/guide/assets.html

在@hpcc-js/wasm 方面，请查看此处的“wasmFolder”文档:https://github.com/hpcc-systems/hpcc-js-wasm#wasmFolder因为它会让您覆盖默认位置。