1

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

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

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

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

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

在 Mozilla 提供的编译版本中，代码已被转译为不使用 System.js；请参阅第 3774 行的 webViewerLoad 函数中的视图源：https ://mozilla.github.io/pdf.js/web/viewer.js。

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

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

4

1 回答 1

1

生产 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_viewer。使用 webpack 构建工作正常。让网络工作者正常工作需要一些额外的努力。

于 2018-05-02T23:22:43.753 回答