如何在带有 worker-loader 的 create-react-app 中使用 Web Workers？

Question

我正在尝试在我的 React 应用程序中实现 Web Worker，以便在多个选项卡上共享单个 WebSockets 连接。我使用 worker-loader 依赖来加载 Web Workers。

不幸的是，我什至无法让一个简单的专用网络工作者工作。

App.jsx：

import React, { Component } from 'react';

// eslint-disable-next-line
import myWorker from 'worker-loader!./worker.js';

class App extends Component {
  constructor(props) {
    super();

    this.state = {};
  }

componentWillMount() {
    if(window.SharedWorker) {
      console.log(myWorker);
      myWorker.port.postMessage('Hello worker');

      myWorker.port.onmessage = function(e) {
        console.log('Message received from worker');
        console.log(e.data);
      }
    }

worker.js：

onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}

加载页面时出现如下webpack错误：

我不能使用 worker-loader 的配置样式用法，因为这需要对 webpack 配置进行一些更改。由于 create-react-app，无法编辑此配置。如果我弹出 create-react-app，我可以，但这确实有一些缺点。

为什么它不起作用？有人有什么想法吗？

提前致谢，

迈克

Answer 1

正如@KevBot 所说，我必须创建一个新的 Worker 实例：

// eslint-disable-next-line
import Worker from 'worker-loader!./worker.js';

let myWorker = new Worker();