在React/Webpack应用程序中将节点模块导入到Web Worker [英] Importing node modules to web worker in React/Webpack app

问题描述

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

I have a React app bundled with Webpack. I would like to use a web worker for one of my components, which exports data to Pdf. The generation of the pdf can take a while and lock the browser, so I want to do this work in a web worker to do it in a separate thread. The problem I am having is importing the JsPDF library into my web worker script so i can use it.

这是我的工作脚本:

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", "");
    });
};

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

This gives me this error at runtime:

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

我也确实尝试过使用importScript()函数，如下所示:

I did also try using the importScript() function, like so:

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:

and I get the same invalid URL error. I also tried using require outside of the export:

const JsPDF = require("jspdf");

但是我仍然收到未定义JsPDF的错误.我还能尝试什么?

but i still get an error that JsPDF is not defined. What else can I try?

我应该提到，使用 https://medium.com/prolanceer/optimizing-react-app-performance-using-web-workers-79266afd4a7 ，以使用webpack获取正确的URL:

I should mention that the web worker is instantiated using a custom class, as in https://medium.com/prolanceer/optimizing-react-app-performance-using-web-workers-79266afd4a7, for getting the correct URL with webpack:

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

推荐答案

我最终使用了 worker-加载器(用于webpack).这使我可以像其他任何脚本一样在工作脚本中导入模块.

I ended up using worker-loader for webpack. This allows me to import modules in worker scripts like in any other script.

这篇关于在React/Webpack应用程序中将节点模块导入到Web Worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！