将 WebWoker 与 create-react-app 和 typescript 一起使用答案

【问题标题】：Using WebWoker with create-react-app and typescript将 WebWoker 与 create-react-app 和 typescript 一起使用
【发布时间】：2020-08-06 12:01:05
【问题描述】：

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

我想启用WebWorker 来执行一些昂贵的任务。但是我还没有找到任何解决方案来启用它。

我浏览了一些库：

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

你有什么想法吗？

提前致谢！

【问题讨论】：

标签： reactjs typescript create-react-app web-worker

【解决方案1】：

我终于使用 [worker-loader]。它工作正常。

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

要与 TypeScript 集成，您需要为工作人员的导出定义一个自定义模块

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

【讨论】：

非常感谢！