如何在WebWorker上使用React组件

Question

我正在使用https://react-pdf.org/处的react-pdf包创建PDF生成器。将react-pdf组件转换为pdf的过程会阻塞主线程，因此我想将其转换为单独的Worker线程。

我正在使用带有工作加载程序的create-react-app来识别WebWorker文件。我很难想出一种方法，可以将react组件导入Webworker并使用react-pdf提供的pdf（Component）.toBlob（）方法进行转换。 pdf（Component）.toBlob（）将React组件作为输入并输出blob文件，这意味着工作人员必须以某种方式能够加载React组件。不包括React组件时，WebWorker会按预期工作。

我天真的尝试将React组件导入WebWorker，并尝试运行转换方法：

pdf(<Component />).toBlob().then(blob=>{
   ...
  }) 

导致模块解析错误：

Uncaught Error: Module parse failed: Unexpected token (14:8)
File was processed with these loaders:
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.

我对Webpack的经验不是很丰富，所以我不知道如何解决此问题。任何帮助将不胜感激。

编辑：我正在使用create-react-app默认的webpack配置，并添加了worker-loader，它可以检测.worker.js文件并将其注册为Webworker。我使用react-app-rewired包添加了工作加载器：

module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      })
      config.output['globalObject'] = 'this';
    return config;
  }

Answer 1

此答案是我们在聊天中讨论的扩展。

这里的问题是覆盖功能中的.push()。如in the MSDN documentation所述：

push（）方法将一个或多个元素添加到数组的末尾并返回该数组的新长度。

[C0有效地是在规则数组的末尾添加了加载程序，因此先处理React代码，然后再处理config.module.rules.push()。

[正如Ali Zeaiter发现的解决方案是使用worker.js（.unshift()）而不是cf. doc，以便将加载程序添加到规则数组中，然后首先处理.push()文件。