[英]Web Worker not working when importing module, even while using worker-loader
我正在尝试创建一个 web worker 来防止 React 主线程停滞。 工人应该阅读图像并做各种事情。
该应用程序是使用create-react-app
。
目前我有
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
};
WebWorker.js
export default class WebWorker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(['('+code+')()'], {type: "text/javascript"});
return new Worker(URL.createObjectURL(blob), {type: 'module'});
}
}
readimage.worker.js
import Jimp from "jimp";
export default () => {
self.addEventListener('message', e => { // eslint-disable-line no-restricted-globals
if (!e) return;
console.log('Worker reading pixels for url', e.data);
let data = {};
Jimp.read(e.data).then(image => {
// jimp does stuff
console.log('Worker Finished processing image');
})
postMessage(data);
})
};
然后在我的 React 组件AppContent.js
中我有
import WebWorker from "./workers/WebWorker";
import readImageWorker from './workers/readimage.worker.js';
export default function AppContent() {
const readWorker = new ReadImageWorker(readImageWorker);
readWorker.addEventListener('message', event => {
console.log('returned data', event.data);
setState(data);
});
// callback that is executed onClick from a button component
const readImageContents = (url) => {
readWorker.postMessage(url);
console.log('finished reading pixels');
};
}
但是当我运行它时,我得到了错误
未捕获的 ReferenceError:未定义 jimp__WEBPACK_IMPORTED_MODULE_0__
如何将模块正确导入 web worker?
您可能会遇到 webpack 在 WebWorker class 中导入工作程序的问题。 尝试返回new Worker(URL.createObjectURL(blob), import.meta.url));
就像它在 webpack 文档中的记录方式一样。
在我的 next.js typescript 项目中,我使用此代码并在我的用例中回答:
function in onClick prop on the element at next.js
async () => {
const testWorker = new Worker(
new URL("./test.worker.ts", import.meta.url), {
name: "test",
type: "module",
});
testWorker.onmessage = function (event) {
console.log("data:", event.data, "\n", "event:", event);
};
testWorker.postMessage([0, 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
}
test.worker.ts
self.onmessage = function ({ data }) {
self.postMessage((data as number[]).map((d) => d * 10));
};
export {};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.