如何在Svelte中包含一个WASM NPM模块？
我正在使用Vite运行一个Svelte应用程序，并使用WASM-PAKC-target Web构建WASM软件包。如果我直接与香草JS一起使用该软件包，则可以
<script type="module">
import init, { greet } from "./pkg/compiler.js";
init().then(() => {
greet("Hello");
});
</script>
在enger的html文件中编写类似的内容，这是我的wasm_bindgen函数之一，而且效果很好。
但是，我的预期管道是发布pkg/ wasm-pack生成NPM的文件夹，然后在vite中使用此软件包，类似于vite，类似
<script lang="ts">
import init, { greet } from "@ocr-compiler/compiler";
init().then(() => {
greet("Hello");
});
</script>
：这引发了一个错误： 未知文件扩展名” .Wasm” for/home/drbracewell/code/code/packages/svelte-editor/node_modules/@ocr-compiler/compiler/compiler/compiler/compiler_bg.wasm 有人知道我如何解决这个问题吗？ Vite Docs提到，它将自动处理.wasm文件，但是当它们从NPM软件包中包括时不会发生？
I'm using vite to run a svelte app, and have a WASM package built with wasm-pack --target web. If I use the package directly with vanilla JS, I can write something like:
<script type="module">
import init, { greet } from "./pkg/compiler.js";
init().then(() => {
greet("Hello");
});
</script>
in an HTML file where greet is one of my wasm_bindgen functions, and that works fine.
However, my intended pipeline is to publish the pkg/ folder that wasm-pack generates to npm, and then use this package in svelte with vite, something like so:
<script lang="ts">
import init, { greet } from "@ocr-compiler/compiler";
init().then(() => {
greet("Hello");
});
</script>
However, this throws an error:Unknown file extension ".wasm" for /home/drbracewell/code/ocr/packages/svelte-editor/node_modules/@ocr-compiler/compiler/compiler_bg.wasm
Does anyone know how I can fix this?
Vite docs mention that it will automatically process .wasm files, but does this not happen when they're included from npm packages?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
最终使用 vite-plugin-wasm-pack ，但是几个夫妇注意：
- 目标Web标记wasm-pack。npm的WASM软件包，则需要将main属性添加到package.json 由WASM -PACK生成 - 当前有一个拉动请求打开，以确保它不会被添加，但是与此同时，设置将其添加到将其添加到JSON。Eventually solved this using vite-plugin-wasm-pack, but a couple notes:
--target webflag withwasm-pack.npm, you will need to add amainproperty to thepackage.jsongenerated bywasm-pack- There's currently a pull request open to ensure that it will get added regardless of the target, but in the meantime it would be pretty simple to setup a package script that adds it to the JSON.