[英]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.