Vite项目中使用?url导入WASM失败

Question

背景：我是Vite新手，最近我正在尝试构建一个Markdown渲染项目，该项目从外部接收Markdown格式字符串并渲染GFM HTML。我选择 md4w 作为转换器，npm 包在 md4w/js 路径中包含两个 wasm。

这是我最初使用的代码。

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

并且使用

pnpm dev

效果很好。但是，如果我使用

pnpm build

和

pnpm preview

，它将不起作用，因为Vite没有将wasm捆绑到dist中，浏览器控制台会显示此错误。

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

然后我按照

md4w

项目自述文件指南并将设置脚本部分更改为

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import wasmUrl from 'md4w/js/wasm-small.wasm?url';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

然而，这一次更糟糕。即使

pnpm dev

也会失败，linter 也会显示此错误

[plugin:vite:import-analysis] Missing "./js/wasm-small.wasm" specifier in "md4w" package

但是 wasm-small.wasm 位于 node_modules 中，md4w.d.ts 也位于其中。目录结构是

-rw-r--r--  2  staff  staff    1.7K    11    19  16:02  index.js          
-rwxr-xr-x  2  staff  staff  863.9K    11    19  16:02  md4w-fast.wasm*   
-rwxr-xr-x  2  staff  staff   59.1K    11    19  16:02  md4w-small.wasm*  
-rw-r--r--  2  staff  staff    5.6K    11    19  16:02  md4w.d.ts         
-rw-r--r--  2  staff  staff    7.4K    11    19  16:02  md4w.js           
-rw-r--r--  2  staff  staff     155    11    19  16:02  unwasm.js

要重现的代码可在 [https://stackblitz.com/edit/md4w-iy-test-hcofvr?file=src%2Fcomponents%2FHelloWorld.vue] 中找到

是否有其他方法可以从这个 md4w 包导入 wasm，而不需要从外部 url 导入，并且可以捆绑到 dist 中？非常感谢！

Answer 1

md4w 使用导出字段，这会阻止访问内部文件，因此文档是错误的，您无法在

"md4w/js/*"

下导入。

它确实有 unwasm 支持，所以我尝试安装它，但它似乎没有帮助。

这里有一些“hacky”解决方法：

• 将 wasm 文件复制到您的项目中（对我有用）：示例 stackblitz。
• 使用 CDN 版本（没有尝试过，应该也可以，但性能会更差）。