如何在WebWorker上使用React组件

Question

我正在使用https://react-pdf.org/的react-pdf包创建一个PDF生成器。将react-pdf组件转换为pdf的过程会阻塞主线程，因此我希望在一个单独的工作线程上转换它们。

我正在使用带有worker-loader的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.

如有任何帮助，我们将不胜感激。

编辑：我使用的是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()。如MSDN文档中所述：

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

实际上，config.module.rules.push()在规则数组的末尾添加了加载器，因此首先处理React代码，然后处理worker.js。

Ali Zeaiter发现，解决方案是使用.unshift()（参见doc)，而不是.push()，以便将加载程序前置到规则数组，从而首先处理worker.js文件。