Webpack worker-loader无法编译Typescript worker

Question

我按照worker-loader文档中的说明配置项目，并且能够使用正确的d.ts使TS代码intel正常工作。

但是，在webpack构建过程中会引发错误，我不明白为什么。

 ERROR in ./src/test.worker.ts
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
| const ctx: Worker = self as any;
| ctx.addEventListener('message', event => {
|   console.log(event);

我的工作人员文件内容test.worker.ts：

 ERROR in ./src/test.worker.ts
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
| const ctx: Worker = self as any;
| ctx.addEventListener('message', event => {
|   console.log(event);

申请表 index.ts

const ctx: Worker = self as any;
ctx.addEventListener('message', event => {
  console.log(event);
  setTimeout(() => ctx.postMessage({
    foo: 'boo'
  }), 5000);
});

最后是我的 webpack.config.js

import TestWorker from './test.worker.ts';

const test = new TestWorker();
test.postMessage({});

任何帮助深表感谢。

谢谢 ：）

Answer 1

好吧，我知道了。

首先，我需要在ts-loader之前移动worker loader，并且不需要在worker use属性中指定数组，只需按照worker-loader文档中的描述进行保存即可。

module: {
    rules: [
      {test: /\.worker\.ts$/, loader: 'worker-loader'},
      {test: /\.tsx?$/, loader: "ts-loader" },
      {test: [/\.vert$/, /\.frag$/], use: 'raw-loader'},
      {test: /\.(png|jpg|gif|svg)$/, use: {loader: 'file-loader', options: {}} },
      {test: /.*\.sass/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    ]
  },

然后在我的工作人员中，我还需要导出任何其他内容，否则打字稿（2.8.3）会抱怨找不到找不到模块，因此我export default null as any避免进一步混淆ts。

worker.js

const ctx: Worker = self as any;
ctx.addEventListener('message', event => {
  console.log(event);
  setTimeout(() => ctx.postMessage({
    foo: 'boo'
  }), 5000);
});
export default null as any;

index.js

import TestWorker from './test.worker.ts';
const test = new TestWorker('');
test.postMessage({});

Answer 2

感谢 Dmitry，你帮助我在让 worker-loader 构建我的 Typescript 项目方面走得更远。

即便如此，为了让它发挥作用，我还有三个需要解决的问题：

• 当我在 ts-loader/awesome-typescript-loader 上方添加 worker-loader 时，构建会挂起。我通过使导入路径对于从 Web Worker 模块导入/导出的类型更加具体来解决此问题。我通过尝试注释掉 Web Worker 条目文件的内容，然后一次取消注释一行，以查看会构建和不会构建的内容。

• 我做错的第二件事是我在 webpack 配置和导入语句中都添加了 worker-loader。我基本上在 web worker 模块上运行了两次 worker-loader。多。因此，要么将 worker-loader 添加到您的 webpack 配置中，要么添加“worker-loader！” 到导入/要求语句。我将 worker-loader 添加到我的 webpack 配置中，然后像这样导入：import MyWorker = require('./my-worker');

• typeerror MyWorker is not a constructor当我尝试执行 new MyWorker() 时，我得到了一个，并且不得不将 MyWorker 强制转换为 any 以便 Typescript 类型检查器吞下它：new (MyWorker as any)();

希望这可以帮助某人。