使用WebWoker创建-react-app和typescript

yxyvkwin  于 2023-04-07  发布在  TypeScript
关注(0)|答案(2)|浏览(104)

我正在使用create-react-apptypescript进行项目
我想启用WebWorker来执行一些昂贵的任务。但我还没有找到任何解决方案来启用它。
我看了一些图书馆:

你有什么主意吗?
先谢谢你了!

9lowa7mx

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) => {});
z9gpfhce

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

相关问题