将 WebWoker 与 create-react-app 和 typescript 结合使用
Using WebWoker with create-react-app and typescript
我正在使用 create-react-app
和 typescript
进行项目
我想启用 WebWorker
来完成一些昂贵的任务。但是我还没有找到任何解决方案来启用它。
我浏览了一些图书馆:
你有什么想法吗?
提前致谢!
我终于用上了[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) => {});
我正在使用 create-react-app
和 typescript
我想启用 WebWorker
来完成一些昂贵的任务。但是我还没有找到任何解决方案来启用它。
我浏览了一些图书馆:
你有什么想法吗?
提前致谢!
我终于用上了[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) => {});