在reactjs中导入web worker中的模块

Question

我在worker.js中有以下代码，我正在尝试导入其中的KMean，并导出worker，如图所示。

import KMeans from "tf-kmeans";
const splitText = () => {
...
const kmeans = new KMeans({});
...
};
};
let code = splitText.toString();
code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));
const blob = new Blob([code], { type: "application/javascript" });
const worker_script = URL.createObjectURL(blob);
export default worker_script;

在我想调用worker的主要组件中，我使用以下命令调用它：

let worker = new Worker(new URL(worker_script, import.meta.url), {
type: "module",
});

但是当我使用worker时，我会得到以下错误：

Uncaught ReferenceError: tf_kmeans__WEBPACK_IMPORTED_MODULE_1___default is not defined

如何解决这个问题？TIA-

Answer 1

我使用worker loader找到了它。按照以下方式实现worker.js：

import KMeans from "tf-kmeans";
onmessage = function (event) {
// worker body
//self.postMessage(resultToReturn);
};

然后在你的主要组件

1. 使用以下Worker加载器导入Worker：import Worker from "worker-loader!./kmeans.worker.js";。您可以添加// eslint-disable-next-line import/no-webpack-loader-syntax以避免出现linting问题
2. 实例化工作者：var worker = new Worker();
3. 要向工作人员发送任何内容，请使用：worker.postMessage({key:value});
4. 要从工作人员处获取任何信息，请使用：worker.onmessage = (ev) => {};