使用WebWorker与create-react-app和typescript

Question

我正在使用 create-react-app 和 typescript 进行项目开发。

我想启用 WebWorker 来执行一些耗费性能的任务，但目前还没有找到任何启用它的解决方案。

我查看了一些库：

• https://github.com/developit/workerize-loader

你有什么想法吗？

提前感谢！

- Tan Dat

Answer 1

我最终使用了 [worker-loader]。它工作得还不错。

https://github.com/webpack-contrib/worker-loader#integrating-with-typescript

要与 TypeScript 集成，您需要为 worker 的 exports 定义一个自定义模块。

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

- Tan Dat

---

非常感谢您！ - KJ Sudarshan

为了解决 eslint 的意外导入错误，请在 worker 导入的顶部使用下面的代码：// eslint-disable-next-line import/no-webpack-loader-syntax - mohammad barzegar

Answer 2

针对最新的React Scripts（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文档。

- Denis Sedchenko