在Aurelia和TypeScript中正确实施网络工作人员

问题描述：

不幸的是，我无法在整个网络上找到这样的答案。在Aurelia和TypeScript中正确实施网络工作人员

我有一个基于TypeScript/Aurelia CLI/RequireJS的Aurelia应用程序。有了这样的结构：

|data 
    |-MyService.ts 
|workers 
    |-SomeWorker.ts/js

存在一种称为aurelia-pal-worker包，但没有文档或复杂的例子。

什么我试过到目前为止

Typed-Web-Workers这是好的，但限制太多
有一个SomeWorker的.js和使用Browserify作为附加buildstep在aurelia_project 。

只要我需要像RxJs这样的外部库，Browserify方法就可以工作。当然，当我尝试require("../data/MyService.ts")时，这会中断。为此，我需要将整个构建管道替换为另一个，它使用tsify插件通过Browserify运行整个aurelia项目。

这似乎是我的我有3种选择：

查找工作示例编译文件打字原稿到一个网络工作者，并使用aurelia-pal-worker进口的依赖。
使用TypedWorker，只是扔昂贵的功能集成到像一个线程：
new TypedWoker(expensiveFuncFromService, handleOutput)
编译MyService.ts分离JS-文件（而不是捆绑的话），并要求它像这样：
require("/scripts/MyService.js")

最后两个对我来说似乎不太吸引人，但应该很直接。任何提示或例子，高度赞赏！ PS：对于不熟悉奥里利亚的人来说：它使用一个盖帽下的吞咽管道。

我不相信aurelia-pal-worker就是你正在寻找的东西，因为它仅仅是Web Worker的Aurelia平台抽象层的实现。我相信这是工作的一部分，可能会让Aurelia在未来将一些框架任务卸载到Web Workers。 –

@AshleyGrant thx快速回复！我假设'pal'提供了一个模块加载器抽象，我可以在这里使用。 – Xceno

对于Web Workers + TypeScript和Aurelia，如何做到这一点的答案可能与如何在非Aurelia项目中做到这一点的答案相同。因此，如果您可以了解如何在TypeScript + RequireJS项目中执行此操作，则该项目可能适用于Aurelia CLI项目。 –

答

所以经过一些摆弄我切换到webpack based solution，这使我可以使用惊人的webpack-worker-loader。

这是修改现有项目并快速启动并重新运行的最佳选择。

这是怎么看起来像在最后：

custom_typings/worker-loader.d.ts

declare module "worker-loader!*" { 
    const content: new() => any; 
    export = content; 
}

worker/some-service.ts

export class SomeService { 
    public doStuff() { 
    console.log("[SomeService] Stuff was done"); 
    } 
}

worker/my-worker.ts

import "rxjs/add/observable/interval"; 

import { Observable } from "rxjs/Observable"; 
import { SomeService } from "./some-service"; 

const svc = new SomeService(); 
svc.doStuff(); 

console.log("[Worker] Did stuff"); 
onmessage = event => { 
    console.log(event); 
}; 

Observable.interval(1000).subscribe(x => postMessage(x));

工人之后被加载这样的：

import * as MyWorker from "worker-loader!./worker/my-worker"; 
const worker = new MyWorker(); 
worker.onmessage = msg => console.log("[MyClass] got msg from worker", msg);

它会生成以下控制台输出：

1: "[SomeService] Stuff was done" 
2: "[Worker] Did stuff" 
3: "[MyClass] got msg from worker", 1 
4: "[MyClass] got msg from worker", 2 
...

你需要充分的工人吹DI？

不要害怕，与this answer一点点帮助，我想通了，如何与我们的基础的WebPack的解决方案改写这个：

let container: Container = null; 
let myService: SuperComplexService = null; 

// Import the loader abstraction, so the DI container knows how to resolve our modules. 
import("aurelia-pal-worker") 
    .then(pal => pal.initialize()) 
    // We need some polyfills (like "Reflect.defineMetadata") 
    .then(() => import("aurelia-polyfills")) 
    // Then we get the DI service and create a container 
    .then(() => import("aurelia-dependency-injection")) 
    .then(({ Container }) => (container = new Container())) 
    .then(() => import("../services/my-super-complex-service")) // Here we go! 
    .then(({ SuperComplexService }) => (myService = container.get(SuperComplexService) as SuperComplexService)) 
    .then(() => startWorker()); 

const startWorker = async() => { 
    // Let's get going! 
}

这架链中的所有学分去@杰里米 - danyow。

在Aurelia和TypeScript中正确实施网络工作人员

相关推荐