如何将WASM npm模块与vite结合在一起？

Question

我正在使用vite运行一个svelte应用程序，并有一个用wasm-pack --target web构建的WASM包。如果我直接与vanilla JS一起使用这个包，我可以编写如下内容：

<script type="module">
    import init, { greet } from "./pkg/compiler.js";

    init().then(() => {
        greet("Hello");
    });
</script>

在HTML中，greet是我的wasm_bindgen函数之一，而且工作正常。

但是，我的目标是将wasm-pack生成的wasm-pack文件夹发布到npm，然后在vite中使用这个包，如下所示：

<script lang="ts">
    import init, { greet } from "@ocr-compiler/compiler";
    
    init().then(() => {
        greet("Hello");
    });
</script>

但是，这会引发一个错误：Unknown file extension ".wasm" for /home/drbracewell/code/ocr/packages/svelte-editor/node_modules/@ocr-compiler/compiler/compiler_bg.wasm，有人知道我如何解决这个问题吗？Vite文档提到它将自动处理.wasm文件，但是当它们包含在npm包中时，这种情况不会发生吗？

Answer 1

最后使用vite-plugin-wasm-pack解决了这个问题，但是有几个人注意到：

• 您需要使用--target web标志与wasm-pack捆绑。
• 如果您的铁锈箱在本地存在，您应该能够通过路径，插件将正确捆绑它。
• 如果您打算将您的包发布到或正在使用来自npm的WASM包，则需要将一个main属性添加到wasm-pack生成的package.json中--当前有一个pull请求打开，以确保它将被添加，而不管目标是什么，但同时，设置一个包脚本将其添加到JSON中非常简单。