在没有自定义加载程序字符串的情况下，将 WebWorker 与 Webpack 和 worker-loader 一起使用

Question

我正在努力让网络工作者更好地使用 Typescript 和 Webpack 的 worker-loader。他们的文档中有一个通过自定义模块声明实现此目的的示例，但这依赖于使用 webpack worker-loader!./myWorker 语法。

我希望能够通过自定义 *.worker.js webpack use 规则加载工作程序，而不是在导入字符串中明确列出加载程序。如果它是一个简单的相对导入，关于 typescript 的一些事情似乎不喜欢定义或修改模块声明，并且被困在 worker 文件不是模块的事实，即使它有一个模块声明。

我有一个工人看起来像

// test.worker.ts
/// <reference lib="webworker" />

const worker: DedicatedWorkerGlobalScope = self as any;

worker.onmessage = ({ data }) => {
  if (data instanceof Array) {
    worker.postMessage(data.join(' ') + '!');
  }
};

一个看起来像

的声明

// custom.d.ts
declare module '*.worker' {
  class TestWorker extends Worker {
    constructor();
  }

  export default TestWorker
}

并在我的主应用程序中用作

import TestWorker from './test.worker';

const testWorker = new TestWorker();
testWorker.onmessage = ({ data }: { data: string }) => {
  console.log(data);
};

testWorker.postMessage([
  'hello',
  'I',
  'am',
  'a',
  'web',
  'worker',
]);

错误输出为

TypeScript error in /worker-test/src/index.tsx(9,24):File '/worker-test/src/test.worker.ts' is not a module.  TS2306

将导入更改为 worker-loader!./test.worker 似乎有效并让打字稿理解自定义声明，但我真的试图避免使用自定义加载程序字符串，因为目的是将其集成到 create-react-不允许这些的应用程序。

有没有办法让常规的相对导入识别自定义模块声明？

Answer 1

你快到了！

更改模块声明以包含文件扩展名：

// custom.d.ts
declare module '*.worker.ts' {
  class TestWorker extends Worker {
    constructor();
  }

  export default TestWorker
}

并且您的导入还包括文件扩展名：

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

这对我有用 - 在导入中指定扩展名会阻止 TS 将其作为模块导入，并且在声明中指定扩展名会阻止 TS 抱怨，因为您正在通过以下方式导入 .ts 文件还指定了扩展名。

在没有自定义加载程序字符串的情况下，将 WebWorker 与 Webpack 和 worker-loader 一起使用

Using WebWorkers in Typescript with Webpack and worker-loader without custom loader strings

web-worker

typescript

webpack