网络工作者 onmessage - 未捕获的语法错误：意外的标记 <

Question

按照这个例子我编写了以下函数：

var rasterToVectorWorker = new Worker(
  "../../../services/canvas/rasterToVectorWorker.js"
);

rasterToVectorWorker.postMessage("message");

rasterToVectorWorker.onmessage = e => {
  console.log("this is the return from the worker: ", e);
};

rasterToVectorWorker.js：

onmessage = function(e) {
  console.log("Message received from main script");
  var workerResult = "Result: " + e;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

但是我收到以下错误消息：

rasterToVectorWorker.js：1 未捕获的语法错误：意外的标记

<

使用

window.onmessage

也没有解决问题。

编辑：我正在使用 create-react-app 而不弹出和添加 webpack 加载器

我做错了什么？

Answer 1

我想你可以尝试以下选项之一：

第一个是将你的

rasterToVectorWorker

放入

public

文件夹中，然后你的WebWorker就可以正确加载了。

const rasterToVectorWorker = new Worker('rasterToVectorWorker.js'); 另一种选择是“动态”加载 WebWorker：

import rasterToVectorWorker from '../../../services/canvas/rasterToVectorWorker.js'

function loadWebWorker(worker) {
    const code = worker.toString();
    const blob = new Blob(['('+code+')()']);
    return new Worker(URL.createObjectURL(blob));
}

const rasterToVectorWorker = loadWebWorker(rasterToVectorWorker);

rasterToVectorWorker.postMessage("message");

Answer 2

当我尝试加载 Web Worker 文件并将其传递给我的新 Worker 时，我在 React 项目中也遇到了同样的问题。

虽然我没有在 create-react-app 中使用修复程序，但解决方案应该类似。

我发现我需要使用 Web Worker 加载器，可以在这里找到：

https://www.npmjs.com/package/worker-loader

然后我更新了我的 webpack 配置以内联工作线程，如下所示：

{
  test: /\.worker\.js$/,
  use: {
    loader: 'worker-loader',
    options: {
      inline: true
    }
  }
},

这让我可以使用我的网络工作者。

Answer 3

将 Web Worker 与 create-react-app 一起使用而不使用

worker-loader

 的解决方案是 

https://github.com/alewin/useWorker。

示例：

import React from "react";
import { useWorker } from "@koale/useworker";

const rasterToVector = () => {
  ...
}

const Example = () => {
  const [rasterToVectorWorker] = useWorker(rasterToVector);

  const run = async () => {
    const result = await rasterToVectorWorker(); 
    console.log("End.");
  };

  return (
    <button type="button" onClick={run}>
      Run rasterToVectorWorker
    </button>
  );
};

Answer 4

您可以使用以下方法。

无论文件放在哪里。

const myWorker = new Worker(new URL('./my-worker.js', import.meta.url))