javascript - 让 pdf.js 1.5 和 require.js 能够很好地协同工作

Question

在我的项目中，我长期使用 require.js 和 pdf.js 库。直到最近，Pdf.js 才将自己置于全局对象中。我仍然可以通过使用垫片在我的 requirejs 配置中使用它。 pdfjs 库将依次加载另一个名为 pdf.worker 的库。为了找到这个模块，解决方案是向全局 PDFJS 对象添加一个名为workerSrc 的属性，并指向磁盘上的文件。这可以在加载 pdfjs 库之前或之后完成。 pdfjs 库使用 pdf.worker 启动 WebWorker为此，它需要源文件的路径。

当我尝试将项目中的 pdfjs 库更新到新版本 (1.5.314) 时，加载和包含库的方式已更改为使用 UMD 模块，现在一切都变得有点棘手。

pdfjs 库检查环境是否使用 requirejs，因此它将自己定义为名为“pdfjs-dist/build/pdf”的模块。当此模块加载时，它会检查名为“pdfjs-dist/build/pdf.worker”的模块。由于我有另一个文件夹结构，我已使用新路径将它们添加到我的 requirejs 配置对象中:

paths: {
    "pdfjs-dist/build/pdf": "vendor/pdfjs/build/pdf",
    "pdfjs-dist/build/pdf.worker": "vendor/pdfjs/build/pdf.worker"
}

这是为了让模块加载器找到模块。在开发中这效果很好。然而，当我尝试在 grunt 构建步骤中使用 requirejs 优化器时，它会将所有项目文件放入一个文件中。此步骤还将尝试包含 pdf.worker 模块，这会生成错误:

Error: Cannot uglify2 file: vendor/pdfjs/build/pdf.worker.js. Skipping it. Error is: RangeError: Maximum call stack size exceeded

由于工作源需要位于磁盘上的单个文件中，因此我不希望包含此模块。 所以我在 requirejs 配置中尝试了两种不同的配置设置。 第一次尝试是覆盖我的 grunt 构建选项中的 paths 属性:

paths: {
    "pdfjs-dist/build/pdf.worker": "empty:"
}

要测试的第二件事是将其从我的模块中排除:

modules: [{
    name: "core/app",
    exclude: [
        "pdfjs-dist/build/pdf.worker"
    ]
}]

这两种技术都应该告诉优化器不要包含该模块，但两次尝试都以与之前相同的错误告终。 requirejs 优化器仍然尝试将模块包含到构建中，并且尝试对其进行丑化最终会出现 RangeError。

有人可能会说，由于 uglify 步骤失败，它不会被包含在内，我可以继续我的业务，​​但如果 uglify 步骤碰巧在 pdfjs 的新更新中开始工作 - 那么该怎么办？

任何人都可以帮我弄清楚为什么 requirejs 配置不会在构建步骤中排除它以及如何让它这样做。

Answer 1

我发现了问题的核心是什么，现在我有办法解决问题并使我的构建过程正常运行。我在 grunt 中的构建步骤是使用 grunt-contrib-requirejs我需要覆盖此作业配置中的一些选项。

1. 我不希望 pdf.worker 模块包含在我的串联和缩小的生产代码中。

2. 我不希望 r.js 缩小它只是为了稍后将其从串联文件中排除。

我试图解决第一个问题，认为这意味着第二个问题也应该得到解决。当我发现两者是分开的时，我终于找到了解决方案。

在 r.js example github上有一个名为 fileExclusionRegExp 的属性。这就是我现在用来告诉 r.js 不要将文件复制到构建文件夹的方法。

fileExclusionRegExp: /pdf.worker.js/

其次，我需要告诉优化器不要将此模块包含在串联文件中。这是通过将此模块的 paths 属性覆盖为值 "empty:" 来完成的。 .

paths: {
  "pdfjs-dist/build/pdf.worker": "empty:"
}

现在我的 grunt 构建步骤将正常工作，不会出现错误，一切都很好。 感谢async5告知我有关 uglify 和 pdf.worker 的错误。该解决方法应用于另一个繁琐的任务，该任务丑化了工作人员并将其单独复制到构建文件夹中。 grunt-contrib-uglify 的选项对象任务将需要此属性，以免破坏 pdf.worker 文件:

compress: {
  sequences: false
}

现在，我的项目在为生产而构建时效果非常好。