将节点模块导入 React/Webpack 应用程序中的网络工作者

Question

我有一个与 Webpack 捆绑在一起的 React 应用程序。我想为我的一个组件使用网络工作者，它将数据导出到 Pdf。 pdf 的生成可能需要一段时间并锁定浏览器，所以我想在网络工作者中完成这项工作以在单独的线程中完成。我遇到的问题是将 JsPDF 库导入到我的网络工作者脚本中，以便我可以使用它。

这是我的工作脚本：

import * as JsPDF from "jspdf";

export default () => {
    self.addEventListener("message", event => {
        const canvases = event.data;

        const pdf = new JsPDF({
            orientation: "l",
            unit: "in",
        });
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < canvases.length; i++) {
            if (i > 0) pdf.addPage();
            pdf.addImage(canvases[i].toDataURL("image/png"), "PNG", 0.25, 0, 11, 8);
        }
        pdf.save("report.pdf");
        self.postMessage("done", "");
    });
};

这在运行时给我这个错误：

Uncaught ReferenceError: jspdf__WEBPACK_IMPORTED_MODULE_0__ is not defined
    at blob:http://localhost:11449/ea75c456-15ee-45e9-b82b-902c518dc635:4

我也试过使用 importScript() 函数，像这样：

export default () => {
    importScripts("jspdf");
    self.addEventListener("message", event => {
        const canvases = event.data;

        const pdf = new JsPDF({
            orientation: "l",
            unit: "in",
        });
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < canvases.length; i++) {
            if (i > 0) pdf.addPage();
            pdf.addImage(canvases[i].toDataURL("image/png"), "PNG", 0.25, 0, 11, 8);
        }
        pdf.save("report.pdf");
        self.postMessage("done", "");
    });
};

我得到这个错误：

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL 'jspdf' is invalid.

或者我试试：

importScripts("../../../../node_modules/jspdf/dist/jspdf.min.js");

我得到了同样的无效 URL 错误。我还尝试在导出之外使用 require:

const JsPDF = require("jspdf");

但我仍然收到未定义 JsPDF 的错误。我还能尝试什么？

我应该提到 Web Worker 是使用自定义 class 实例化的，如 https://medium.com/prolanceer/optimizing-react-app-performance-using-web-workers-79266afd4a7 中所示，以便使用 webpack 获得正确的 URL：

export default class WebWorker {
    constructor(worker: any) {
        const code = worker.toString();
        const blob = new Blob([`(${code})()`]);
        return new Worker(URL.createObjectURL(blob));
    }
}

Answer 1

我最终将 worker-loader 用于 webpack。这允许我像在任何其他脚本中一样在工作脚本中导入模块。

将节点模块导入 React/Webpack 应用程序中的网络工作者

Importing node modules to web worker in React/Webpack app

import

web-worker

reactjs

webpack