WebWorker (react) 中的 Promise 抛出 babel/webpack 错误答案

【问题标题】：Promises inside WebWorker (react) throwing babel/webpack errorWebWorker (react) 中的 Promise 抛出 babel/webpack 错误
【发布时间】：2020-04-06 07:52:51
【问题描述】：

我正在尝试将一些密集的数据处理卸载到 React 应用程序中的 WebWorker。如果我在 onmessage 处理程序中调用任何异步函数，使用 Promise 或 async/await，我会得到：

参考错误： _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default 没有定义

这是我的工人：

const DataSyncWorker = () => {

  self.doSyncing = async () => {
    return null;
  };

  self.onmessage = e => {
    if (!e) return;
    console.log(`worker received message in listener callback: ${e.data}`);

    self.doSyncing();

    self.postMessage(`SYNC_COMPLETE`);
  };
};

export default DataSyncWorker;

以及用于创建 Worker 的设置文件：

export default class WebWorker {
  constructor(worker) {
    const code = worker.toString();
    const blob = new Blob([`(${code})()`]);
    return new Worker(URL.createObjectURL(blob));
  }
}

并调用它：

import DataSyncWorker from './workers/DataSyncWorker';
import WebWorker from './workers/workerSetup';

const App = () => {

  const dataSyncWorker = new WebWorker(DataSyncWorker);

  dataSyncWorker.postMessage(`START_SYNC`);
  dataSyncWorker.addEventListener(`message`, event => {
     console.log(`index: message from worker: ${e.data}`);
  });
 }

如果我将 doSyncing 更改为非异步，则一切正常。这是一个简化的示例，我已经确认它仍然表现出相同的行为。但我无法使用 axios 或任何其他异步函数。我的理解是这应该是可能的，并且，鉴于错误，我想知道我的问题是否与 babel/webpack 有关。或者也许我做错了什么。任何帮助是极大的赞赏。谢谢。

【问题讨论】：

标签： reactjs webpack promise babeljs web-worker

【解决方案1】：

我通过一些更改解决了这个问题：

首先，我合并了worker-loader库，使用内联类型导入，比如：

import DataSyncWorker from 'worker-loader!./workers/DataSyncWorker';

然后，我不得不从原始实现的包含方法中解包内部函数，因此 DataSyncWorker 现在看起来像这样：

doSyncing = async () => {
    return null;
  };

  self.onmessage = e => {
    if (!e) return;
    console.log(`worker received message in listener callback: ${e.data}`);

    doSyncing();

    self.postMessage(`SYNC_COMPLETE`);
  };

其他代码保持不变，现在一切正常。

我相信您可以使用另一种方法，包括修改 webpack.config.js，并将这些添加到 modules.rules 部分：

{
  test: /\.worker\.js$/,
  use: ['worker-loader', 'babel-loader'],
  include: [path.join(__dirname, 'src/workers')]
},

然后更新您的工作文件的名称，使其与测试条件匹配，并更新它的导入等，但我还没有尝试过，并且内联方法似乎更简单。

【讨论】：