1

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

我正在使用带有 worker-loader 的 create-react-app 来识别 WebWorker 文件。我很难想出一种将反应组件导入 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;
  }
4

1 回答 1

1

这个答案是我们在聊天中讨论的延伸。

这里的问题是.push()来自覆盖功能。如MSDN 文档中所述：

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

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

正如 Ali Zeaiter 发现的那样，解决方案是使用.unshift()( cf. doc ) 而不是.push()为了将加载器添加到规则数组中，从而首先处理worker.js文件。

于 2019-11-04T15:11:34.250 回答