typescript - 使用 wasm 将模块导入并编译到 webpack 中

Question

我正在尝试导入 module在通过 webpack 编译的库中使用。尽管加载了模块中的 javascript API，但附带的 .wasm文件不是并导致任何提及 wasm 的函数模块抛出未定义的错误。也有可能是 webpack 干扰了 .wasm文件，但我不确定。这是错误。

Uncaught (in promise) TypeError: _index_bg_wasm__WEBPACK_IMPORTED_MODULE_0__.open_image is not a function
    at Module.open_image (index_bg.js?0d72:1468)

以及相关的函数调用

import('@silvia-odwyer/photon').then(photon => {
  console.log(photon.open_image) // <-- correctly prints function
  let ctx = canvas.getContext('2d');
  let photonImg = photon.open_image(canvas, ctx); // <-- error
  photon.grayscale(photonImg);
  photon.putImageData(canvas, ctx, photonImg);
});

我试过使用 wasm-loader , 编辑我的 tsconfig使用 esnext根据 this ，用 javascript 而不是 typescript 编写，将 webpack 块数限制为 1，以及从 documentation 导入和编译 wasm 的不同方式和 online

Answer 1

我遇到了这个完全相同的错误，它实际上发生了，因为我正在双重加载 WASM 文件。在我的 webpack 配置中，我有我的 wasm-pack 配置:

config.plugin('wasm-pack')
    .use(WasmPackPlugin)
    .init(
      (Plugin) =>
        new Plugin({
          crateDirectory: path.resolve(__dirname, './rust_wasm_code'),
          forceMode: 'release'
        })
    )
    .end()

以及用于加载 WASM 文件的文件加载代码:

config.module
    .rule('wasm')
    .test(/.wasm$/)
    .use('wasm-loader')
    .loader('wasm-loader')

我通过删除第二段代码(并依靠 WASM-pack 编译和加载)来修复错误。