我试过了:
// 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
最佳答案
现在 workerize 方法起作用了!
我最初尝试过workerize-loader + wasm-loader,它在dev模式下工作得很好,但是一旦编译,原型(prototype)就不会添加到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
关于rust - worker-loader 不能在 react 项目中使用 wasm-loader 和 typescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61820320/