在带有Webpack的Typescript和无自定义加载器字符串的worker-loader中使用WebWorkers

Question

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

我希望能够通过自定义的*.worker.js 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似乎是可行的，并让typescript理解自定义声明，但是我真的试图避免使用自定义加载器字符串，因为这样做的目的是将其集成到create-react-app中，而create-react-app不允许这样做。

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

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文件的。