Pesquisa de site

reactjs - Usando WebWorker com create-react-app e typescript


Estou tendo o projeto usando create-react-app e typescript

Eu gostaria de habilitar WebWorker para fazer algumas tarefas caras. Mas não encontrei nenhuma solução para habilitá-lo.

Eu olhei através de algumas bibliotecas:

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

Você tem alguma ideia?

Obrigado(a) desde já!

Resposta #1

Finalmente usei o [worker-loader]. Funciona bem.

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

Para integrar com o TypeScript, você precisará definir um módulo personalizado para as exportações do seu 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) => {});

Artigos relacionados