Question

当我尝试使用网络工作者时，我遇到了正确编译我的打字稿的问题。

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

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

在我的应用程序的另一部分中，我使用webpack worker loader来加载我的工作人员：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

在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个对象（此处支持完整列表的对象：Functions and classes available to Web Workers）; TypeScript的dom库不兼容，并重新定义了lib.webworker.d.ts

中定义的一些元素

Answer 2

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

Answer 3

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

我遇到了这个问题：工作文件正在重播

Uncaught SyntaxError: Unexpected token '<'，网址为/[object%20Module]。

要解决该问题，请用

替换main.ts中的workerPath

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

如何使用TypeScript和webpack创建Web worker

3 个答案: