Typescript 将参数传递到网页包加载程序的内联导入

我有一个未弹出的createreact应用程序（react scripts v3.4.3）和Typescript应用程序，我正试图在其中使用webworkers。我能够使用以下导入语句将worker捆绑在一起：

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader!./worker';

问题是我需要更改加载程序的publicPath属性，而无需从create react app弹出，因此我尝试添加以下Web包文档中提到的查询参数：

选项可以通过查询参数传递，例如？key=value&foo=bar，或者通过JSON对象传递，例如？{“key”：“value”，“foo”：“bar”}

我尝试了两种方法，但都返回相同的Typescript编译器错误“找不到模块…”

---

webpack文档中提到的查询参数是否仅用于

webpack.config.js

中的

模块.rules

属性？

该问题实际上与webpack完全无关，而是一个Typescript问题

我不确定这是否完全正确，但我将把我的解决方案留给那些试图使用createreact应用程序和Typescript获取

workerize loader

的人

我组合了来自和使用workerize loader的

publicPath

选项（虽然没有文档，但在中）的指令

在我的模块声明文件中，我刚刚用

publicPath

值声明了模块，然后当我导入工作模块时，我匹配了声明。假设这些文件都位于名为

src/worker

的目录下。最后一个文件显示了如何调用worker方法

src/worker/custom.d.ts

declare module 'workerize-loader?publicPath=new/public/path/!*' {
  class WebpackWorker extends Worker {
    constructor();

    // Add any custom functions to this class.
    // Make note that the return type needs to be wrapped in a promise.
    
    someLongOperation(): Promise<string>;
  }

  export = WebpackWorker;
}

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader?publicPath=new/public/path!./worker';

export default Worker;

export function someLongOperation(): string {
  // doing long lasting operation
  // ...

  return 'result of long operation';
}

import Worker from 'src/worker';

...

const myWorker = new Worker();
cosnt workerResult = await myWorker.someLongOperation();

src/worker/worker.ts

declare module 'workerize-loader?publicPath=new/public/path/!*' {
  class WebpackWorker extends Worker {
    constructor();

    // Add any custom functions to this class.
    // Make note that the return type needs to be wrapped in a promise.
    
    someLongOperation(): Promise<string>;
  }

  export = WebpackWorker;
}

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader?publicPath=new/public/path!./worker';

export default Worker;

export function someLongOperation(): string {
  // doing long lasting operation
  // ...

  return 'result of long operation';
}

import Worker from 'src/worker';

...

const myWorker = new Worker();
cosnt workerResult = await myWorker.someLongOperation();

src/someService.ts

declare module 'workerize-loader?publicPath=new/public/path/!*' {
  class WebpackWorker extends Worker {
    constructor();

    // Add any custom functions to this class.
    // Make note that the return type needs to be wrapped in a promise.
    
    someLongOperation(): Promise<string>;
  }

  export = WebpackWorker;
}

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader?publicPath=new/public/path!./worker';

export default Worker;

export function someLongOperation(): string {
  // doing long lasting operation
  // ...

  return 'result of long operation';
}

import Worker from 'src/worker';

...

const myWorker = new Worker();
cosnt workerResult = await myWorker.someLongOperation();

---

您可能希望

声明模块'workerize loader？*'

来捕获任何查询。