如何使用 TypeScript 和 webpack 制作 web worker

Question

当我尝试将 Web Worker 与 Webpack 结合使用时，我在正确编译打字稿时遇到了一些问题。

我有一个这样定义的工人：

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 文件中添加另一个标准库，以公开工作人员需要访问的全局变量。我已经指定了这些：

{
     "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'.

所以我的问题是：如何指定网络工作者使用 lib.webworker.d.ts 定义，而其他一切都遵循正常定义？

Answer 1

在您的 tsconfig.json 文件中，在 compilerOptions 中设置：

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

Web worker 无法访问 DOM、window、document 和 parent 对象（此处支持的完整对象列表：Functions and classes available to Web Workers）； dom TypeScript 库不兼容，重新定义了一些在 lib.webworker.d.ts

中定义的元素

Answer 2

使用 batresc 的回答，我实际上已经成功地以一种有点不错的方式来回传递消息。

除了他对库的回答之外，Typescript 代码还需要一些推动才能开始工作。

首先，创建一个文件，让文件加载器在导入时配合你。我有一个名为 file-loader.d.ts 的文件，其中包含以下内容：

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

接下来，在您的 main.ts 中使用文件加载器导入工作人员：

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

这个 workerPath 然后可以用来创建实际的工人：

const worker = new Worker(workerPath);

接下来，创建实际的工作文件，test.worker.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 3

rasmus-hansen 的解决方案在其基本形式中不允许工作人员自己导入模块。在进一步挖掘之后，我发现 https://github.com/Qwaz/webworker-with-typescript 中的示例确实如此。我在 worker-loader 中测试了这个版本，并且能够简单地添加一个简单的模块，而不是 worker.ts 和 entry.ts 都可以导入的模块。

Answer 4

自从我迁移到 file-loader": "5.0.2"，

我遇到了这个问题：工作文件正在返回

Uncaught SyntaxError: Unexpected token '<' 而 url 是 /[object%20Module]。

要解决它，请将 main.ts 中的 workerPath 替换为

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

如何使用 TypeScript 和 webpack 制作 web worker

How to make web workers with TypeScript and webpack

web-worker

typescript

webpack