Question

关注this example我写了以下函数：

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未捕获的SyntaxError：意外的令牌＆lt;

使用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文件并将其传递给我的新工作者时，我也遇到了与React项目相同的问题。

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

我发现我需要使用web worker loader，可以在这里找到：https://www.npmjs.com/package/worker-loader

然后我更新了我的webpack配置，以便像这样内联工作者：

end

然后让我使用我的网络工作者。

Answer 3

将Web Worker与create-react-app一起使用而不使用std::vector<std::string> tmp_shape; tmp_shape.reserve(N); for(int j=0; j<N; ++j) tmp_shape.emplace_back(std::move(shape[I[j]])); shape.swap(tmp_shape);的解决方案是https://github.com/alewin/useWorker。

示例：

worker-loader

web worker onmessage - 未捕获的SyntaxError：意外的令牌＆lt;

3 个答案: