如何使用 Vite 将 wasm 导入到 webworker 中以进行生产构建？

Question

我正在使用 vite 并在网络工作者中运行 @silvia-odwyer/photon 来进行一些图像处理。我只需在网络工作者中使用

const photon = await import('@silvia-odwyer/photon');

导入即可。我一直在使用

vite-plugin-wasm

，这是我的 vite 配置：

import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default {
    plugins: [
        wasm(),
        topLevelAwait()
    ],
    worker: {
        rollupOptions: {
            output: {
                format: "iife",
                inlineDynamicImports: true,
            }
        },
        plugins: () => {
            return [wasm(), topLevelAwait()]
        }
    },
};

这对于开发服务器来说效果很好，但是导入似乎不适用于生产构建（使用

npm run build

），光子最终变得未定义。我尝试了很多不同的导入方法，但都不起作用。我希望有人可以帮助我，因为我对 Wasm 和 Vite 还很陌生，并且真的不知道还能尝试什么。

Answer 1

我认为您面临的问题可能是您的

rollupOptions

格式为

iife

。

在使用针对此问题提供的示例存储库进行生产构建时，我遇到了一些类似的问题。解决方案是将worker的格式更改为

es

。也许它对你有帮助...

// vite.config.ts
...
  worker: {
    plugins: () => [wasm(), topLevelAwait()],
    format: 'es' // default is iife
  }