system.js build config for pdf.js

Question

I'm trying to build pdf.js in order to embed the viewer into an app I'm working on.

I want to build the viewer by hand so it can be included in the application that is getting packaged by webpack.

The application entrypoint, index.js, has the line

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

This results in the viewer being included in the transpiled app code, however the pdf.js viewer uses System.js to load modules that it needs to run.

In the compiled version that Mozilla serves, the code has been transpiled to not use System.js; see view-source:https://mozilla.github.io/pdf.js/web/viewer.js in the the webViewerLoad function on line 3774.

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

This differs from the non-transpiled source that can be found on https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L178, and the source map for the Mozilla hosted viewer retains these SystemJS lines.

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

What I want to know is how this was achieved, and how to replicate the configuration to build this.

Answer 1

The production viewer.js has been compiled with webpack. In gulpfile.js you will find the following block:

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

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

In my case I simply installed pdfjs-dist and imported pdfjs-dist/web/pdf_viewer. Building with webpack worked fine. Getting the web worker to work right required some extra effort.