Конфигурация сборки system.js для pdf.js

Question

Я пытаюсь создать pdf.js, чтобы встроить программу просмотра в приложение, над которым я работаю.

Я хочу собрать средство просмотра вручную, чтобы его можно было включить в приложение, которое упаковывается через веб-пакет.

Точка входа в приложение, index.js, имеет строку

import viewer from 'pdfjs-dist/web/pdf_viewer';

Это приводит к тому, что средство просмотра включается в переносимый код приложения, однако средство просмотра pdf.js использует System.js для загрузки модулей, которые необходимо запустить.

В скомпилированной версии, которую обслуживает Mozilla, код был перенесен, чтобы не использовать System.js; см. источник представления: https://mozilla.github.io/pdf.js/web/viewer.js в функции webViewerLoad в строке 3774.

function webViewerLoad() {
    var config = getViewerConfiguration();
    window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
    pdfjsWebApp.PDFViewerApplication.run(config);
}

Это отличается от нетранслируемого источника, который можно найти по https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L178, и исходная карта для размещенного в Mozilla средства просмотра сохраняет эти SystemJS линии.

function webViewerLoad() {
    let config = getViewerConfiguration();
    if (typeof PDFJSDev === 'undefined' || !PDFJSDev.test('PRODUCTION')) {
        Promise.all([
            SystemJS.import('pdfjs-web/app'),
            SystemJS.import('pdfjs-web/genericcom'),
            SystemJS.import('pdfjs-web/pdf_print_service'),
        ]).then(function([app, ...otherModules]) {
            window.PDFViewerApplication = app.PDFViewerApplication;
            app.PDFViewerApplication.run(config);
        });
    } else {
        window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
        pdfjsWebApp.PDFViewerApplication.run(config);
    }
}

Я хочу знать, как это было достигнуто и как реплицировать конфигурацию, чтобы построить это.

Answer 1

Производственный viewer.js был скомпилирован с веб-пакетом. В gulpfile.js вы найдете следующий блок:

function createWebBundle(defines) {
  var viewerOutputName = 'viewer.js';

  var viewerFileConfig = createWebpackConfig(defines, {
    filename: viewerOutputName,
  });
  return gulp.src('./web/viewer.js')
             .pipe(webpack2Stream(viewerFileConfig));
}

В моем случае я просто установил pdfjs-dist и импортировал pdfjs-dist/web/pdf_viewer. Сборка с webpack работала нормально. Чтобы веб-работник работал правильно, потребовались дополнительные усилия.