Pdf.js: 支持系统

创建于 2015-12-22 · 34评论 · 资料来源: mozilla/pdf.js

请添加对systemjs的支持。

2-feature

资料来源

Vanuan

所有34条评论

由于没有提供示例，我将要求提供更多信息。而且我认为Browserify当前可与pdfjs-dist配合使用（某些模块例外）。

yurydelendik 于 2015-12-22

这是使用systemjs的最常见示例：

npm install jspm
jspm init # use defaults
jspm install pdfjs-dist

index.html

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Title</title>
</head>

<body>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('src/app.js');
    </script>
</body>
</html>

src / app.js

# ES6 syntax
import pdfjs from 'pdfjs-dist';

# expected pdfjs to be a window.PDFJS object

Vanuan 于 2015-12-22

谢谢你举例

yurydelendik 于 2015-12-22

在以前的版本中，我们可以使用jspm shim来使用pdfjs。
https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm
但是在包含node-ensure之后，我们不能这样做（node-ensure似乎与system.js不兼容）。

Vanuan 于 2015-12-22

实际上，这是对jspm打包程序的要求，而不是对Systemjs加载程序的要求。
也就是说，如果需要jspm填充程序就可以了，但是不要添加不兼容的更改，例如node-ensure。

Vanuan 于 2015-12-22

@万安

在config.js中解决以下问题：

    "npm:[email protected]": {
      "process": "github:jspm/[email protected]",
      "node-ensure": "empty",
      "entry?name=[hash]-worker.js": "empty"
    },

（空是一个没有内容的empty.js文件）

Browserify需要类似的技巧

yurydelendik 于 2015-12-22

现在发出：pdf.worker.js被加载两次，这是通过webpack中的request.ensure（）解决的。必须禁止加载“ ./pdf.worker.js”，直到真正需要它为止。

yurydelendik 于 2015-12-22

我以为“ PDFJS.disableWorker = true；” 解决了吗？是不是

Vanuan 于 2015-12-22

如果您使用System.import('./pdf.worker') ，它将仅发出一个http请求。

甚至System.import('pdfjs-dist/build/pdf.worker')

使用node-ensure有特定的原因吗？我相信系统加载程序可以在Webpack中正常工作。

Vanuan 于 2015-12-22

“ PDFJS.disableWorker = true;” 这不是一个选择，因为我们要在不同的线程上移动PDF处理。我们不想为图书馆用户提供糟糕的解决方案，对吗？

yurydelendik 于 2015-12-22

好吧，我更喜欢糟糕的解决方案而不是根本没有解决方案。对于我的用例，即使冻结1秒也没问题。
如果您找到更好的解决方案，我将非常高兴。

Vanuan 于 2015-12-22

使用节点确保有特定的原因吗？

如果您仔细查看示例/ webpack /会产生什么：

pdf.js yury$ ls -la build/webpack/
total 2384
drwxr-xr-x   5 yury  staff     170 Dec 22 15:20 .
drwxr-xr-x  34 yury  staff    1156 Dec 22 10:08 ..
-rw-r--r--   1 yury  staff  546125 Dec 21 16:35 1.bundle.js
-rw-r--r--   1 yury  staff  546463 Dec 21 16:35 9d074593b165291f150e-worker.js
-rw-r--r--   1 yury  staff  122796 Dec 21 16:35 bundle.js

“ bundle.js”是加载的主文件（这意味着它将在122796字节后带来并初始化UI-更快的页面启动速度）。 “ 9d074593b165291f150e-worker.js”是一个工作程序，它将运行逻辑并且不会在慢速设备上锁定UI。仅当disableWorker触发时以及对于旧版浏览器（例如IE9），才会加载“ 1.bundle.js”部分。

yurydelendik 于 2015-12-22

如果您找到更好的解决方案，我将非常高兴。

我期望systemjs可能有某种保护措施，无法解析所有需求（用“ empty”代替“ ./pdf.worker.js”对我不起作用）。

@Vanuan您可以向systemjs提出问题，看看他们是否有更好的想法吗？谢谢。

yurydelendik 于 2015-12-22

听起来像systemjs https://github.com/systemjs/systemjs/issues/983上的最后一个问题？

yurydelendik 于 2015-12-22

好吧，我更喜欢糟糕的解决方案而不是根本没有解决方案。对于我的用例，即使冻结1秒也没问题。

@Vanuan ，pdf.combined.js文件的用法没有变化（我希望如此）-看起来我们需要在这种情况下保留它。您需要像＃6729中描述的那样使用它。从您的描述来看，您尚不清楚您打算使用systemjs加载PDFJS。

yurydelendik 于 2015-12-22

pdf.combined.js文件的用法没有任何变化

啊，太好了！

Vanuan 于 2015-12-22

无论如何，与工人一起使用时，某些事情肯定发生了变化。
以前，我们可以使用worker的完整路径，但可以在其中获取Uncaught ReferenceError: require is not defined ：

PDFJS.workerSrc = 'jspm_packages/npm/[email protected]/build/pdf.worker.js';

现在，似乎卡在了加载文件上。好像模块加载的回调永远不会完成。
请求的最后一个模块是process 。

可能，Systemjs无法处理以下构造：

(function(process) {
  if (typeof PDFJS === 'undefined') {
    (typeof window !== 'undefined' ? window : this).PDFJS = {};
  }
})(require('process'));

Vanuan 于 2015-12-23

👍1

无论如何，与工人一起使用时，某些事情肯定发生了变化。
以前，我们可以使用完整的工作路径，

pdf.combined.js完全包含/包含pdf.worker.js，不需要指定workerSrc。

yurydelendik 于 2015-12-23

对pdf.combined.js的更改https://github.com/mozilla/pdfjs-dist/commit/a7cd5f77b00bac19c0f6ee4c2cfd5bbf0fe45d8f#diff -eccf5b94e31b0939738de07167e02af6

yurydelendik 于 2015-12-23

是的，我正在评估与jspm一起使用worker的选项。

Vanuan 于 2015-12-23

现在发出：pdf.worker.js加载了两次，这是通过webpack中的request.ensure（）解决的一个问题

那么，现在它正在主线程中加载并且不使用importScripts（）吗？

Vanuan 于 2015-12-23

我的src / app.js是：

import pdfjs from 'pdfjs-dist';

console.log(PDFJS);

因此它甚至还没有使用getDocument，但是在网络监视器中它显示了pdf.worker.js的两个条目

yurydelendik 于 2015-12-23

真奇怪。我只看到一个条目。

Vanuan 于 2015-12-23

真奇怪。我只看到一个条目。

不得为AFAIK :)

yurydelendik 于 2015-12-23

在Firefox和Chrome上也是如此：
screen shot 2015-12-22 at 5 34 42 pm

yurydelendik 于 2015-12-23

啊。所以看起来Systemjs愚蠢地解析了所有require s并尝试加载它们...

Vanuan 于 2015-12-23

有条件的需求不是很常见的用例。

Vanuan 于 2015-12-23

这就是为什么它也尝试加载节点确保。

Vanuan 于 2015-12-23

@yurydelendik
这样如何需要帮助webpack？ Webpack仍然使用importScripts加载worker，对吗？

Vanuan 于 2015-12-23

有条件的需求不是很常见的用例。

我不同意， https：//github.com/systemjs/systemjs/issues/983和https://github.com/webpack/docs/wiki/code-splitting是常见的用例。

Webpack仍然使用importScripts加载worker，对吗？

是的通过new Worker(..) 。但是，如果禁用了工作程序，它还可以选择将pdf.worker.js加载为模块。

yurydelendik 于 2015-12-23

该问题将由＃6775解决-systemjs具有自动检测模块类型的功能。现在是commonjs，在UMD中它将是AMD，因此它不会尝试解析require（）。

PS wip在https://github.com/yurydelendik/pdf.js/tree/pdfjsumd

yurydelendik 于 2015-12-28

哇，太好了，我会尽快合并和发布。

Vanuan 于 2015-12-28

按照＃6825的规定关闭。如果还有其他问题，请打开一个新的问题。

timvandermeij 于 2016-01-08

我还建议在使用jspm时覆盖模块格式： jspm install npm:pdfjs-dist -o "{format: 'amd'}"

yurydelendik 于 2016-04-04

此页面是否有帮助？

0 / 5 - 0 等级

Pdf.js: 支持系统

所有34条评论

相关问题