我正在使用create-react-app和typescript进行项目我想启用WebWorker来执行一些昂贵的任务。但我还没有找到任何解决方案来启用它。我看了一些图书馆:
create-react-app
typescript
WebWorker
你有什么主意吗?先谢谢你了!
9lowa7mx1#
最后我用了[worker-loader]。它工作正常。https://github.com/webpack-contrib/worker-loader#integrating-with-typescript要与TypeScript集成,您需要为worker的导出定义一个自定义模块
// typings/custom.d.ts declare module "worker-loader!*" { class WebpackWorker extends Worker { constructor(); } export default WebpackWorker; }
// Worker.ts const ctx: Worker = self as any; // Post data to parent thread ctx.postMessage({ foo: "foo" }); // Respond to message from parent thread ctx.addEventListener("message", (event) => console.log(event));
// App.ts import Worker from "worker-loader!./Worker"; const worker = new Worker(); worker.postMessage({ a: 1 }); worker.onmessage = (event) => {}; worker.addEventListener("message", (event) => {});
z9gpfhce2#
针对最新React脚本(v5+)和Webpack 5的答案:Worker-loader模块不适用于Webpack 5。
const w = new Worker(new URL('path/to/your/worker.ts', import.meta.url)); w.postMessage('hello world');
参见Webpack docs。
2条答案
按热度按时间9lowa7mx1#
最后我用了[worker-loader]。它工作正常。
https://github.com/webpack-contrib/worker-loader#integrating-with-typescript
要与TypeScript集成,您需要为worker的导出定义一个自定义模块
z9gpfhce2#
针对最新React脚本(v5+)和Webpack 5的答案:
Worker-loader模块不适用于Webpack 5。
参见Webpack docs。