1

我有一个未弹出的 create-react-app (react-scripts v3.4.3) 和 Typescript 应用程序，我正在尝试在其中使用 Web Worker。我能够使用以下 import 语句将 worker 与workerize-loader捆绑在一起：

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

问题是我需要更改加载程序的 publicPath 属性而不从 create-react-app 弹出，所以我尝试添加查询参数，如内联加载程序的 webpack 文档中提到的：

选项可以通过查询参数传递，例如 ?key=value&foo=bar，或 JSON 对象，例如 ?{"key":"value","foo":"bar"}

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

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

webpack 文档中提到的查询参数是否仅用于 中的module.rules属性webpack.config.js？

4

1 回答 1

1

这个问题实际上根本与 Webpack 无关，而是一个 Typescript 问题。

我不确定这是否完全正确，但我会将我的解决方案留给那些试图workerize-loader使用 create-react-app 和 Typescript 的人。

我将worker-loader 的指令与 Typescript结合起来，并使用了workerize-loader 的publicPath选项（虽然没有记录，但在src中）。

在我的模块声明文件中，我只是用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;
}

src/worker/index.ts

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

export default Worker;

src/worker/worker.ts

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

  return 'result of long operation';
}

src/someService.ts

import Worker from 'src/worker';

...

const myWorker = new Worker();
cosnt workerResult = await myWorker.someLongOperation();
于 2020-09-21T20:13:59.213 回答