Wie man web-worker mit Typoskript und webpack
Ich habe einige Probleme mit richtig kompilieren meine Typoskript, wenn ich versuchen, mit web-worker.
Habe ich ein Arbeiter wie folgt definiert:
onmessage = (event:MessageEvent) => {
var files:FileList = event.data;
for (var i = 0; i < files.length; i++) {
postMessage(files[i]);
}
};
In einem anderen Teil meiner Anwendung bin ich mit dem webpack Arbeiter loader laden meiner Arbeiter so: let Worker = require('worker!../../../workers/uploader/main');
Bin ich jedoch habe einige Probleme mit dem Typoskript Erklärungen nicht anschreien mich, wenn die Anwendung transpiled.
Nach meinen Recherchen habe ich eine weitere hinzufügen standard-lib, die mein tsconfig-Datei zum setzen der globalen Variablen, die Arbeiter müssen Zugang zu. Diesen habe ich angegeben, etwa so:
{
"compilerOptions": {
"lib": [
"webworker",
"es6",
"dom"
]
}
}
Nun, wenn ich laufen webpack, um es bauen alles bekomme ich einen Haufen Fehler wie diese: C:/Users/hanse/Documents/Frontend/node_modules/typescript/lib/lib.webworker.d.ts:1195:13
Subsequent variable declarations must have the same type. Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.
Also meine Frage ist: Wie kann ich festlegen, so dass die webworker verwendet die lib.webworker.d....ts-Definitionen und alles andere folgt dem normalen Definitionen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
In Ihrem
tsconfig.json
- Datei, incompilerOptions
setzen Sie diese:Web-worker haben keinen Zugriff auf DOM -,
window
,document
undparent
Objekte (die volle Liste der unterstützten Objekte hier: Funktionen und Klassen zur Verfügung, um Web-worker); diedom
lib von TypeScript ist nicht kompatibel und neu definieren einige Elemente, die definieren, inlib.webworker.d.ts
tsconfig.json
Dateien - eine für den Hauptteil des code, und eine für den web-worker, aber das ist nur, wie weit ich komme.Mit batressc' Antwort ich habe es geschafft, tatsächlich übergeben von Nachrichten hin und her zu arbeiten, in einer einigermaßen netten Art und Weise.
Hinzufügen, um seine Antwort mit den libs, die typescript-code braucht auch einige Anstöße zu bekommen arbeiten.
Ersten, erstellen Sie eine Datei, um die Datei-loader coorperate mit Ihnen, wenn Sie den Import. Ich habe eine Datei mit dem Namen file-loader.d....ts mit folgendem Inhalt:
Nächsten, in deiner main.ts importieren Sie die Arbeiter mit den fileloader:
Diese
workerPath
können dann verwendet werden, um die tatsächlichen Arbeiter:Erstellen Sie als Nächstes die eigentlichen worker-Datei
test.worker.ts
mit dem folgenden Inhalt:Können Sie dann Nachrichten hin und her in den main.ts-Datei:
Habe ich alles gesammelt in einem github-repository, wenn jemand Sie braucht, um die volle Sicht zu bekommen, alles funktioniert: https://github.com/zlepper/typescript-webworker Diesem repository haben auch eine webpack.config.js um zu zeigen, wie webpack konfiguriert werden kann, für diese.
rasmus-hansen ' s Lösung nicht, in seiner base form, daß die Arbeitnehmer import-Module selbst. Nach etwas mehr Graben fand ich, dass das Beispiel in https://github.com/Qwaz/webworker-with-typescript tut. Getestet habe ich die version in
worker-loader
, und war in der Lage zu trivial ein einfaches Modul, als es importiert werden kann, indem beideworker.ts
undentry.ts
.