为什么这个网络工作者不回复发布的消息？

Question

我正在做一个 React 项目，我有这段代码：

在这里，我初始化了一个 web-worker 并在加载Documentation组件时发布了一条消息。

function Documentation() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    console.log('ran');
    const worker = new Worker('../../Workers/SolveWorker.js');

    worker.postMessage({ type: 'start', data: [5, 10] });

    console.log(worker);


    return () => {
      worker.terminate();
    };
  }, []);
  
  ...

在../../Workers/SolveWorker.js中，我让我的工作人员响应一个事件：

/* eslint-disable-next-line no-restricted-globals */
self.onmessage = function (e) {
  console.log("Worker: Message received from main script");
};

当我加载此组件时，我的消息似乎已发布，但我从未收到 web 工作人员的回复。 我看过 API 但无法弄清楚我做错了什么。 此外，我收到此错误： SolveWorker.js:1 Uncaught SyntaxError: Unexpected token '<' (at SolveWorker.js:1:1)

我相信这在某种程度上与我的 HTML 文件有关（当我在 chrome 开发工具中单击此错误时，它会打开我的 HTML），但我不确定以何种方式。

任何帮助表示赞赏。

Answer 1

当您调用const worker = new Worker('../../Workers/SolveWorker.js'); 您的浏览器将 go 尝试获取'../../Workers/SolveWorker.js' 。 该路径是相对于文档根目录的（即您的index.html文件所在的位置，在您的情况下听起来像/public ）就像script标记src一样，而不是创建工作程序的Javascript文件。

或者，您可以使用 汇总插件来内联工作程序，在这种情况下，您的文件路径将是正确的，因为它在构建时通过正常的节点解析算法将是 go。