Импорт модулей узлов в веб-приложение в приложении React / Webpack - PullRequest
Новая
       15

Импорт модулей узлов в веб-приложение в приложении React / Webpack

0 голосов
/ 06 марта 2019

У меня есть приложение React в комплекте с Webpack.Я хотел бы использовать веб-работника для одного из моих компонентов, который экспортирует данные в 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 не определен.Что еще я могу попробовать?

Следует отметить, что веб-работник создается с помощью пользовательского класса, как в https://medium.com/prolanceer/optimizing-react-app-performance-using-web-workers-79266afd4a7, для получения правильного URL с помощью веб-пакета: 

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

1 Ответ

0 голосов
/ 11 апреля 2019

В итоге я использовал worker-loader для веб-пакета.Это позволяет мне импортировать модули в рабочие скрипты, как и в любой другой скрипт.

...