Cómo hacer trabajadores web con TypeScript y webpack

web-worker

Question

Tengo problemas para compilar correctamente mi escritura de caracteres cuando intento utilizar trabajadores web

Tengo un trabajador definido así:

onmessage = (event:MessageEvent) => {
var files:FileList = event.data;
for (var i = 0; i < files.length; i++) {
postMessage(files[i]);
}
};

En otra parte de mi aplicación, estoy usando el cargador de trabajadores del paquete web para cargar a mi trabajador así: let Worker = require(''worker!../../../workers/uploader/main'');

Sin embargo, tengo algunos problemas para hacer que las declaraciones de escritura de tipos no me griten cuando la solicitud tiene que ser transpilada. Según mi investigación, tengo que agregar otra biblioteca estándar a mi archivo tsconfig para exponer las variables globales a las que el trabajador necesita acceso. Estos los he especificado como tal:

{
"compilerOptions": {
"lib": [
"webworker",
"es6",
"dom"
]
}
}

Ahora, cuando ejecuto webpack para que compile todo, recibo un montón de errores como estos: 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''. 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''.

Entonces, mi pregunta es: ¿Cómo especifico para que el trabajador web utilice las definiciones lib.webworker.d.ts y todo lo demás sigue las definiciones normales?

Answer 1

En su archivo tsconfig.json , en compilerOptions establezca esto:

{
"compilerOptions": {
"target": "es5",
//this config for target "es5"
"lib": ["webworker", "es5", "scripthost"]
//uncomment this for target "es6"
//"lib": ["webworker", "es6", "scripthost"]
}
}

Los trabajadores web no pueden acceder a DOM, window , document y objetos parent (aquí se muestran todos los objetos compatibles: funciones y clases disponibles para los trabajadores web ); la lib.webworker.d.ts de lib.webworker.d.ts de TypeScript no es compatible y redefine algunos elementos que se definen en lib.webworker.d.ts

Answer 2

La solución de rasmus-hansen no permite, en su forma básica, que los trabajadores importen módulos ellos mismos. Después de investigar un poco más, encontré que el ejemplo en https://github.com/Qwaz/webworker-with-typescript hace. Probé la versión en worker-loader y pude agregar trivialmente un módulo simple que puede ser importado tanto por worker.ts como por entry.ts .

Answer 3

Usando la respuesta de batressc, me las arreglé para conseguir que los mensajes pasen de un lado a otro trabajando de una manera agradable.

Agregando a su respuesta con las bibliotecas, el código mecanografiado también necesita algunos empujones para trabajar.

En primer lugar, cree un archivo para que el cargador de archivos se coordine con usted al importar. Tengo un archivo llamado file-loader.d.ts con el siguiente contenido:

declare module "file-loader?name=[name].js!*" {
const value: string;
export = value;
}

A continuación, en su main.ts, importe el trabajador utilizando el cargador de archivos:

import * as workerPath from "file-loader?name=[name].js!./test.worker";

Este workerPath se puede usar para crear el trabajador real:

const worker = new Worker(workerPath);

A continuación, cree el archivo de trabajo real, test.worker.ts , con el siguiente contenido:

addEventListener(''message'', (message) => {
console.log(''in webworker'', message);
postMessage(''this is the response '' + message.data);
});

A continuación, puede enviar mensajes de ida y vuelta en el archivo main.ts:

worker.addEventListener(''message'', message => {
console.log(message);
});
worker.postMessage(''this is a test message to the worker'');

He reunido todo en un repositorio de github, si alguien necesita la perspectiva completa para que todo funcione: https://github.com/zlepper/typescript-webworker Este repositorio también tiene un webpack.config.js para mostrar cómo podría ser el webpack. configurado para esto