如何使用TypeScript和webpack创建Web worker

Question

当我尝试使用Web worker时,我遇到了一些正确编译我的打字稿的问题.

我有一个像这样定义的工人:

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

在我的应用程序的另一部分,我正在使用webpack worker loader来加载我的worker,如下所示: let Worker = require('worker!../../../workers/uploader/main');

然而,当我需要编译应用程序时,我会遇到一些问题,使得打字稿声明不会对我大喊大叫.根据我的研究,我必须在我的tsconfig文件中添加另一个标准库,以公开worker需要访问的全局变量.这些我指定如下:

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

现在,当我运行webpack让它构建一切时,我得到了一堆这样的错误: 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'.

所以我的问题是:如何指定webworker使用lib.webworker.d.ts定义,其他一切遵循正常的定义？

Answer 1

使用batressc的答案我已经设法实际上以一种不太好的方式来回传递消息.

添加到libs的答案,打字稿代码也需要一些推动才能工作.

首先,创建一个文件,以便在导入时使文件加载器与您合作.我有一个名为file-loader.d.ts的文件,其中包含以下内容:

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

接下来,在main.ts中使用fileloader导入worker:

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

这file-loader.d.ts可以被用来创建实际工作者:

const worker = new Worker(workerPath);

接下来,main.ts使用以下内容创建实际的工作文件:

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

然后,您可以在main.ts文件中来回发送消息:

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

我已经收集了github存储库中的所有内容,如果有人需要完整的视角来使一切正常工作:https://github.com/zlepper/typescript-webworker此存储库还有一个webpack.config.js来显示webpack是如何为此配置.

Answer 2

在您的tsconfig.json文件中,compilerOptions设置此:

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

网站工作人员不能访问DOM, window,document和parent对象(名单这里支持的对象:函数和类可用于网络工作者); domTypeScript 的lib不兼容,并重新定义了一些定义的元素lib.webworker.d.ts

Answer 3

rasmus-hansen 的解决方案在其基本形式中不允许工作人员自己导入模块。经过更多的挖掘，我发现https://github.com/Qwaz/webworker-with-typescript中的示例确实如此。我测试的版本worker-loader，并能够添加平凡简单的模块比可由两个进口worker.ts和entry.ts。