將 WebWoker 與 create-react-app 和 typescript 一起使用

Question

我正在使用create-react-app和typescript進行項目

我想讓WebWorker做一些昂貴的任務。 但我還沒有找到任何解決方案來啟用它。

我瀏覽了一些庫：

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

你有什么想法？

提前致謝！

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