在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：對於不熟悉奧裏利亞的人來說：它使用一個蓋帽下的吞嚥管道。

來源

2017-09-05 Xceno

我不相信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。

來源

2017-09-15 08:57:37 Xceno

在Aurelia和TypeScript中正確實施網絡工作人員

回答

相關問題