worker-loader 不能在 react 项目中使用 wasm-loader 和 typescript答案

【问题标题】：worker-loader cannot work with wasm-loader and typescript in react projectworker-loader 不能在 react 项目中使用 wasm-loader 和 typescript
【发布时间】：2020-05-15 13:22:21
【问题描述】：

我试过了：

// Worker.ts
// @ts-ignore
// eslint-disable-next-line no-restricted-globals
const ctx: Worker = self as any;

// Post data to parent thread
// ctx.postMessage({ foo: "foo" });

// Respond to message from parent thread
ctx.addEventListener('message', async ({ data }) => {
  const {
    href,
    width,
    height
  } = data;
  const { qrcode } = await import('uranus-qrcode');
  const qr = qrcode(href, width, height);
  ctx.postMessage({ href, qr });
});

其中uranus-qrcode 是我创建的一个 Rust-Wasm 模块。我使用 wasm-loader 加载它，当我将它加载到主线程时它可以工作，但是当我用 worker-loader 尝试它时它说：

Uncaught (in promise) TypeError: Cannot read property './modules/uranus_qrcode/uranus_qrcode_bg.wasm' of undefined
    at Object../modules/uranus_qrcode/uranus_qrcode_bg.wasm (http://localhost:3334/0.34621aa454b5fe6ea3b4.worker.js:145:40)
    at __webpack_require__ (http://localhost:3334/34621aa454b5fe6ea3b4.worker.js:34:30)
    at Module../modules/uranus_qrcode/uranus_qrcode.js (http://localhost:3334/0.34621aa454b5fe6ea3b4.worker.js:12:80)
    at __webpack_require__ (http://localhost:3334/34621aa454b5fe6ea3b4.worker.js:34:30)
    at async http://localhost:3334/34621aa454b5fe6ea3b4.worker.js:139:7

【问题讨论】：

标签： rust react-scripts wasm-bindgen worker-loader

【解决方案1】：

现在 workerize 方法可以工作了！

我最初尝试过workerize-loader + wasm-loader，它在dev模式下运行良好，但是一旦编译，原型将不会添加到worker中（怀疑它是workerize-loader中的一个错误，因为所有工作模块的行为都相同）。这确实是 workerize-loader 中的一个错误（参见 workerize-loader failed to work after compiling 和 Version 1.2.0 does not export function on worker instance in production mode）。升级到workerize-loader 1.2.1 后，它可以在开发和生产代码中使用。

我已经更新了主仓库：https://github.com/aeroxy/react-typescript-webassembly-starter.git

【讨论】：