导入模块时 Web Worker 不工作，即使在使用 worker-loader 时也是如此答案

【问题标题】：Web Worker not working when importing module, even while using worker-loader导入模块时 Web Worker 不工作，即使在使用 worker-loader 时也是如此
【发布时间】：2020-04-09 04:49:27
【问题描述】：

我正在尝试创建一个 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');
    };
}

但是当我运行它时，我得到了错误

未捕获的引用错误：未定义 jimp__WEBPACK_IMPORTED_MODULE_0__

如何正确地将模块导入网络工作者？

【问题讨论】：

worker 中的导入尚未得到广泛支持 - 现在看起来像 Chrome、Edge 和 node，developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。你试过 importScripts 吗？ developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/…
@JamesSouth 我查看了使用 importScripts，但除了它给出了一个 linting 错误（我可以设置为忽略），我应该从哪里导入模块？我不能使用 node_modules 文件夹中的相对路径，也不能只使用jimp。使用 importScripts 的唯一方法是将模块复制到 public 文件夹，然后使用绝对 url（例如 http://localhost:3000/jimp.js）。有没有更好的方法来做到这一点？
也许 worker-plugin github.com/GoogleChromeLabs/worker-plugin 而不是 worker-loader 会有所帮助？？

标签： javascript reactjs webpack web-worker worker-loader

【解决方案1】：

您可能在 webpack 在 WebWorker 类中导入您的工作程序时遇到问题。尝试在 webpack 文档中像 how it's documented 一样返回 new Worker(URL.createObjectURL(blob), import.meta.url));。

【讨论】：

非常感谢。在 webpack5 中对我来说很好。

【解决方案2】：

在我的 next.js 打字稿项目中，我使用此代码并在我的用例中回答：

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 {};

【讨论】：