Javascript pdf.js的system.js构建配置

我正在尝试构建pdf.js，以便将查看器嵌入到我正在开发的应用程序中

我想手动构建查看器，以便它可以包含在通过webpack打包的应用程序中

应用程序入口点index.js有以下行

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

这将导致查看器包含在传输的应用程序代码中，但是pdf.js查看器使用System.js加载它需要运行的模块

在Mozilla提供的编译版本中，代码被转换为不使用System.js；请参见第3774行的webViewerLoad函数中的view source:

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

这与上的非传输源不同，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);
    }
}

---

我想知道的是这是如何实现的，以及如何复制配置来构建它。

production viewer.js是用webpack编译的。在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\u查看器。使用webpack进行构建效果良好。让网络工作者正常工作需要一些额外的努力