Pdf.js: Webpackの指示により、「偽のワーカー」が読み込まれます

作成日 2016年09月07日  ·  32コメント  ·  ソース: mozilla/pdf.js

構成：

  • Webブラウザとそのバージョン：Chrome 52
  • オペレーティングシステムとそのバージョン：OS X Yosemite
  • PDF.jsバージョン：1.4.237
  • 拡張機能です：いいえ

問題を再現する手順：
私のコードは：

import pdflib from 'pdfjs-dist'
pdflib.PDFJS.workerSrc = './node_modules/pdfjs-dist/build/pdf.worker.entry.js'

https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website#with -webpackで説明されているとおり、
それでも、実際にドキュメントをロードすると、コンソールにWarning: Setting up fake worker.'れるため、手順が機能しなかったように見えます。

さらに、「PDFJS.workerSrc _shall_はこのファイルを指すように設定する」（現在の言い回し）は自動的に設定されることを意味し、「PDFJS.workerSrc _should_はこのファイルを指すように設定する」はあなたが持っていることを意味するため、手順の表現は間違っているようです自分で設定します。
サンプルコードは、PDFJSをインポートする人が実行できないリポジトリへの相対パス（ pdfjsLib.PDFJS.workerSrc = '../../build/webpack/pdf.worker.bundle.js'; ）を使用するため、あまり役に立ちません。

ワーカースクリプトの自動ロードを行うhttps://github.com/mozilla/pdf.js/pull/6595のような1年未満の問題/ PRを検索したときにも混乱していますが、そのコードはリポジトリに存在しなくなったため、 workerSrc設定する場合と設定しない場合の両方で、偽のワーカーが読み込まれます...偽のワーカーは、Webpackによって作成されたワーカースクリプトの場所を知っています（例： 1.bundle.jsは、 bundle.jsがスクリプトの場合のワーカーです）。したがって、実際のワーカーがこのロジックも使用できなかった理由がわかりません。
作成した1.bundle.jsファイルをworkerSrcにポイントし、webpackのworker-loaderを使用してPDFWorker （ pdflib.PDFJS.PDFWorker = require('worker!pdfjs-dist/build/pdf.worker.entry.js') ）をインスタンス化して置き換えようとしましたが、失敗しました。どちらも機能しないので、ワーカーがwebpackをどのように操作するのか完全にわかりません。

1-other
ソース
picture agilgur5
👍4

最も参考になるコメント

webpackプロジェクトで同じ問題が発生しましたが、別の方法で解決しました。 webpackのバンドルやローダーに依存する代わりに、 CopyWebpackPluginを使用してワーカーソースをビルドディレクトリにコピーしました。

私のビューアで：

import pdfjsLib from 'pdfjs-dist';

if (process.env.NODE_ENV !== 'production') {
   //in dev, get it from the node_modules directory
   //NOTE: don't use the "entry" file -- the script will fail and the web worker will not be used
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/node_modules/pdfjs-dist/build/pdf.worker.js`;
} else {
   //in prod, get it from the build directory
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/build/pdf.worker.js`;
}

webpack.config.js ：

const CopyWebpackPlugin = require('copy-webpack-plugin');

return {
   //... rest of config omitted
   plugins: [{
      new CopyWebpackPlugin([{
         from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
         to: 'pdf.worker.js'
      }])
   }]
}
picture ctowler 2016年11月07日
👍21 ❤5 🎉4

全てのコメント32件

偽のワーカーは、webpackによって作成されたワーカースクリプトの場所を知っているため（たとえば、bundle.jsがスクリプトの場合、1.bundle.jsがワーカーです）、実際のワーカーがこのロジックを使用できない理由がわかりません。

bundle.jsにワーカーが含まれているかどうかを確認します-そこにあるのは（ページの読み込みパフォーマンスとサイズから）間違っています。 pdf.worker.jsファイル全体を個別のバンドルに配置する必要があります。

サンプルコードは、インポートする人がリポジトリ（pdfjsLib.PDFJS.workerSrc = '.. / .. / build / webpack / pdf.worker.bundle.js';）への相対パスを使用するため、あまり役に立ちません。 PDFJSは明らかにできません（あまり有用な例ではありません）。

pdf.worker.jsモジュール（pdfjs-distからインポート）を含むバンドル出力として作成するpdf.worker.bundle.jsファイル

問題の説明は明確ではありません。 完全なサンプルソースコードを提供できますか？

yurydelendik picture yurydelendik 2016年09月08日
👍2

bundle.jsにワーカーが含まれているかどうかを確認します-そこにあるのは（ページの読み込みパフォーマンスとサイズから）間違っています。 pdf.worker.jsファイル全体を個別のバンドルに配置する必要があります。

バンドルされているコードを確認し、ワーカーが含まれていないことを確認できます。 前述したように、ワーカースクリプトは1.bundle.jsとしてバンドルされています。 PDFをロードすると、 1.bundle.jsスクリプトタグが<head>タグに挿入されます（これがPDFJSからのものかwebpackからのものかはわかりません）。

pdf.worker.jsモジュール（pdfjs-distからインポート）を含むバンドル出力として作成するpdf.worker.bundle.jsファイル

node_modulesからワーカースクリプトをロードするWikiの最初の、そして間違いなく好ましい方法を使用する例はありますか？ wikiセクションから：「ワーカーは別のバンドルに組み込まれる必要があります：ファイル「./node_modules/pdfjs-dist/build/pdf.worker.entry.js」を取得してください」

@yurydelendikコードベースに存在しなくなったように見える＃6595のワーカーの自動検出/読み込みについて詳しく教えてください。 私はpdf.jsを使用するライブラリを構築しているので、誰かが私のライブラリを機能させるためにpdf.jsコードをインポートしなければならない場合、それはかなり面倒です（依存関係の依存関係を管理する）。

問題の説明は明確ではありません。 完全なサンプルソースコードを提供できますか？

他に役立つものや関連性のあるものがあまりないため、ソースコードを添付しませんでしたが、ここに約50行の要約があります： http ： file引数は、文字通り<input type='file' />要素からのファイルです。

agilgur5 picture agilgur5 2016年09月08日
👍1

@yurydelendikコードベースに存在しなくなったように見える＃6595のワーカーの自動検出/読み込みについて詳しく教えてください。

この機能は、バンドラー/パッケージャーを対象としていません。

私はpdf.jsを使用するライブラリを構築しているので、誰かが私のライブラリを機能させるためにpdf.jsコードをインポートしなければならない場合、それは少し面倒です（依存関係の依存関係を管理する）。

これまでのところ、Webワーカーを適切に管理するバンドラーは見つかりませんでした。また、webpackやbrowserifyに設定を与えたくありません。両方を同時にサポートすることに問題がありました。

解決策は、依存関係の依存関係を管理することです。簡単ではありません。 ただし、PDFの効率的な解析とレンダリングは簡単な作業ではないことに注意してください。 Web Workerの使用をやめ、それを自由に行うと、UIのパフォーマンスが低下し、トレードオフになります。

他に役立つものや関連性のあるものがあまりないので、ソースコードを添付しませんでした

達成しようとしていることの意図を示すライブラリの小さな例を公開できます。 提供されたコードのスニペットは、実行可能ではなく、実行しようとしていることではないため、役に立ちません。ライブラリです。

yurydelendik picture yurydelendik 2016年09月08日

同じ問題が発生しています。 https://cdn.kidoju.com/support/viewer/index.htmlを参照して
コードはhttps://github.com/kidoju/Kidoju-Helpにあります。 build cmdファイルを使用します。
https://github.com/kidoju/Kidoju-Help/issues/2も参照して

jlchereau picture jlchereau 2016年09月09日

この機能は、バンドラー/パッケージャーを対象としていません。

気づかなかった👍

これまでのところ、Webワーカーを適切に管理するバンドラーは見つかりませんでした。また、webpackやbrowserifyに設定を与えたくありません。両方を同時にサポートすることに問題がありました。
解決策は、依存関係の依存関係を管理することです。簡単ではありません。 ただし、PDFの効率的な解析とレンダリングは簡単な作業ではないことに注意してください。 Web Workerの使用をやめ、それを自由に行うと、UIのパフォーマンスが低下し、トレードオフになります。

@yurydelendik同意しますが、トレードオフを行う必要はないと思います。 Webpackにはworker-loaderがあり、Browserifyにはwebworkifyがあります-

https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L1132で、ワーカーエントリへの直接パスを使用して次のように実行できるようです。
Webpackのvar worker = require('worker!../pdf.worker.entry.js')または
browserifyのvar worker = require('webworkerify')('../pdf.worker.entry.js') 。
それでうまくいったと思ったら、PRを書いていただければ幸いです。

達成しようとしていることの意図を示すライブラリの小さな例を公開できます。 提供されたコードのスニペットは、実行可能ではなく、実行しようとしていることではないため、役に立ちません。ライブラリです。

私が添付したスニペットは、今のところライブラリにあるすべてのコードです（ pdf-to-dataURL ）。 @jlchereauの例では不十分な場合は、そのスニペットを使用する簡単な例を作成できます（NPMからのpdfjs-distは必要ないようですので、正確性についてはよくわかりません）。

agilgur5 picture agilgur5 2016年09月09日

Webpackにはworker-loaderがあり、Browserifyにはwebworkerifyがあります-バンドラーシステムを検出し、どちらかを使用すると、この問題は完全に解決されませんか？

はい、＃6785で試し、後で＃6791で試した後、元に戻しました。 require('worker!...があると、browserifyで問題が発生し、webpackでrequire('webworkerify')(...)が発生します。

それでうまくいったと思ったら、PRを書いていただければ幸いです。

はい、PRを行うことは本当に良いことです。 これまでのところ、pdfjs-distはwebpackで機能し、system.jsおよびnode.jsとともにbrowserifyを実行します。 そして、私たちはそれをこのように維持しようとします。 ありがとう。

また、ワーカーが何らかの理由（セキュリティまたは単にレガシーブラウザ）で利用できない場合、スクリプトタグとしてコードをロードすることに注意してください。 Webワーカーがパラメーターであることを受け入れるPDFWorkerのオーバーロードされたコンストラクターを追加することを計画していました。これは、一部のwebpack / browserifyユースケースの代替ソリューションを提供する可能性があります。

yurydelendik picture yurydelendik 2016年09月09日
👍2

ところで、webpackにはworkerSrcで使用できるエントリローダーがあります

yurydelendik picture yurydelendik 2016年09月09日
👍1

はい、＃6785で試し、後で＃6791で試した後、元に戻しました。 require（ 'worker！...があると、browserifyで問題が発生し、webpackでrequire（' webworkerify '）（...）が発生します。

しかし、あなたの__webpack_require__ここでチェックしませんか
https://github.com/mozilla/pdf.js/pull/6785/commits/79c2f69c3288494c5ce2809182c896484bf4be5c#diff -5f93a8d6c23cf0a169c6ee7347477ce8R30 browserifyがそのステートメントを解析できないようにしますか？ （ ensure部分が問題を引き起こしていたかどうかは

はい、PRを行うことは本当に良いことです。 これまでのところ、pdfjs-distはwebpackで機能し、system.jsおよびnode.jsとともにbrowserifyを実行します。 そして、私たちはそれをこのように維持しようとします。 ありがとう。

私はおそらく来週後半にこれに到達するでしょう-さまざまなバンドラー/プラットフォームに対してチェックするために実行するテストはありますか？

Webワーカーがパラメーターであることを受け入れるPDFWorkerのオーバーロードされたコンストラクターを追加することを計画していました。これは、一部のwebpack / browserifyユースケースの代替ソリューションを提供する可能性があります。

これは素晴らしい選択肢になると思います！ 具体的には、 Workerクラスを受け入れることができる場合、webpackの人々は次のようなものを使用できます。webworkify-webpackとbrowserifyの人々はwebworkifyを使用し、ローダー/ワーカーを引数として渡すだけです。 だからそれは
オーバーロードされた場合のvar worker = new WorkerFromArgs('../pdf.worker.entry.js') 。
これにより、ワーカーローダーロジックの構成がユーザーランドにオフロードされるため、プラットフォーム/バンドラーをpdf.jsにチェックする厄介なPRは必要ありません（いずれの場合も適切なローダーをインストールするのはユーザーの責任です）。

agilgur5 picture agilgur5 2016年09月09日

それでも私は警告を受け取ります：偽の労働者を設定します。 実際にドキュメントをロードすると、コンソールで手順が機能しなかったように見えます。

それは素晴らしいことですが、上で述べたように、この問題は完全な例なしでは対処できません。 これを閉じてPRを待ちましょうか。

yurydelendik picture yurydelendik 2016年09月09日

@jlchereauは1つの例を示しましたhttps://github.com/mozilla/pdf.js/issues/7612#issuecomment-245973303ここでは、コンソールにWarning: Setting up fake workerが同様に表示され、必要に応じて別の例を示すことができます。

workerSrcは現在の実装で機能するはずですが、機能しないため、この問題は依然として関連しています。
いずれにせよ、PRはこの問題を解決するので、それまで追跡のためにこれを開いたままにしておくべきではありませんか？

また、PRを開始する前に、上記の質問に対するフィードバックをお聞きしたいと思います（PRで同じことを行うのと同じように、 __webpack_require__チェックしようとしたときにbrowserifyが文句を言った理由について、テストが必要な場合はすべてのバンドラー/プラットフォームを同時にテストするために実行します）

agilgur5 picture agilgur5 2016年09月10日

@ agilgur5 、あなたは言う：

The snippet I attached is all of the code that would be in the library for now (pdf-to-dataURL).
I could make a quick example that uses that snippet if <strong i="7">@jlchereau</strong>'s example isn't good enough
(it doesn't seem to require pdfjs-dist from NPM, so not sure about the accuracy of it).

https://github.com/kidoju/Kidoju-Help/blob/master/src/main.jsを参照し、必要に応じてコメントを解除してください。

require('../web/viewer.css');
require('../web/compatibility.js');
// require('pdfjs-dist/web/compatibility.js');
require('../web/l10n.js');
window.pdfjsDistBuildPdf = require('../build/pdf.js');
// window.pdfjsDistBuildPdf = require('pdfjs-dist/build/pdf.js');
// require('../web/debugger.js');
require('./viewer.js');

私が両方を試している理由は、 https：//github.com/mozilla/pdf.js/blob/master/web/viewer.jsとhttps://github.com/mozilla/pdfjs-dist/blob/master/です。 web / pdf_viewer.jsは同じではなく、すべてのファイルを同じソース/バージョンから保持する方が適切であると考えています。

とにかく、労働者に関する限り、両方とも同じ振る舞いを示します。

jlchereau picture jlchereau 2016年09月10日

あなたはまだ@jlchereauの例をチェックアウトしたように、それはいないようです@yurydelendik。 また、このバグを示す小さなパッケージとしてpdf-to-dataURLを作成しました。

Webワーカーがパラメーターであることを受け入れるPDFWorkerのオーバーロードされたコンストラクターを追加することを計画していました。これは、一部のwebpack / browserifyユースケースの代替ソリューションを提供する可能性があります。

これに関する更新はありますか？ 前に述べたように、これは私が提案したもの（私が尋ねた質問に答えていなかったので、とにかく実際にPRを行うことができなかった）よりもはるかに優れた解決策であり、将来のユースケースに対してはるかに一般的であり、他のバンドラー。

agilgur5 picture agilgur5 2016年10月01日
👍2

webpackプロジェクトで同じ問題が発生しましたが、別の方法で解決しました。 webpackのバンドルやローダーに依存する代わりに、 CopyWebpackPluginを使用してワーカーソースをビルドディレクトリにコピーしました。

私のビューアで：

import pdfjsLib from 'pdfjs-dist';

if (process.env.NODE_ENV !== 'production') {
   //in dev, get it from the node_modules directory
   //NOTE: don't use the "entry" file -- the script will fail and the web worker will not be used
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/node_modules/pdfjs-dist/build/pdf.worker.js`;
} else {
   //in prod, get it from the build directory
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/build/pdf.worker.js`;
}

webpack.config.js ：

const CopyWebpackPlugin = require('copy-webpack-plugin');

return {
   //... rest of config omitted
   plugins: [{
      new CopyWebpackPlugin([{
         from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
         to: 'pdf.worker.js'
      }])
   }]
}
ctowler picture ctowler 2016年11月07日
👍21 ❤5 🎉4

@ agilgur5 、この問題が発生しました。これは、CommonsChunkPluginを使用していたためです。 私の場合、webworkerはロード中でしたが、エラーUncaught ReferenceError: webpackJsonp is not defined （そのコードが共通のチャンクにプルされ、ワー​​カーが利用できなかったため）。 これにより、ワーカーは早期に終了し、偽の実装にフォールバックしました。

CommonsChuckPluginを使用することも、@ ctowlerが提案するソリューションを使用することもできません。

これで問題が解決することを願っています。

mkennedy3000 picture mkennedy3000 2016年12月20日

やあみんな、
pdf.jsをWebpackで動作させるのに苦労していました。 重要なのは、ワーカーを別のファイルに入れたくないということです。

誰かが次のような問題に直面している場合：

  • Warning: Setting up fake worker.メッセージ、
  • 機能しないPDF.jsワーカーでゴミ箱バンドルを作成するWebpack、
  • バンドルに2回ワーカーを含むWebpack、
    あなたは間違いなく見ておくべきです。

ステップバイステップ

  1. ファイルをプレーンテキストとしてインポートできるように、package.jsonにraw-loaderを含めました。

    "raw-loader": "latest",

  2. pdf.worker.jsがraw-loader介して読み込まれるようにWebpackを構成しました。

      module: {
    rules: [
      {
        test: /pdf\.worker(\.min)?\.js$/,
        use: 'raw-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/, /pdf\.worker(\.min)?\.js$/],
        use: 'babel-loader',
      },
    ],
  },

  3. ここで注意が必要な部分があります。 ワーカーをPDF.jsに渡す唯一の方法は、 workerSrc設定を使用することです。 残念ながら、次のようなことをしています

    pdfjsLib.PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker');

    動作しません。
    だが！ Blobからその場でURLを作成でき、その場で文字列からBlob作成できます。
    したがって、私にとっての実用的な解決策は次のとおりです。

    const pdfjsLib = require('pdfjs-dist');
const pdfjsWorker = require('pdfjs-dist/build/pdf.worker.min');

const pdfjsWorkerBlob = new Blob([pdfjsWorker]);
const pdfjsWorkerBlobURL = URL.createObjectURL(pdfjsWorkerBlob);

pdfjsLib.PDFJS.workerSrc = pdfjsWorkerBlobURL;

    🎉：D

  4. あともう一つだけ。 PDF.jsには、ワーカーの読み込みで問題が発生した場合のフォールバックがたくさんあります。
    js require.ensure([], function () { var worker; worker = require('./pdf.worker.js'); callback(worker.WorkerMessageHandler); });
    バンドルサイズを気にし、私のようにpdf.worker.minを使用した場合、Webpackは混乱し、とにかくpdf.worker.jsます。 さらに悪いことに、PDF.jsの縮小版でpdf.worker.jsます。 では、どうすればこのがらくたに対処できますか？
    次のように、Webpackに1つのモジュールを別のモジュールに置き換えるように指示します。
    js new webpack.NormalModuleReplacementPlugin( /pdf\.worker(\.min)?\.js$/, path.join(__dirname, 'node_modules', 'pdfjs-dist', 'build', 'pdf.worker.min.js'), ),
    これにより、 /pdf\.worker(\.min)?\.js$/一致するすべてのファイル、より具体的には、 pdf.worker.jsとpdf.worker.min.jsが縮小バージョンに置き換えられます。

ふぅ。 これが誰かに役立つことを願っています！

wojtekmaj picture wojtekmaj 2017年07月13日
👍12

@wojtekmajwebpackユーザーのゼロ構成用にpdfjs-dist / https://github.com/yurydelendik/pdfjs-reactでその使用法を見ることができ

yurydelendik picture yurydelendik 2017年07月13日
❤17

@yurydelendikありがとう、はい、私はこれを知っていました。 私はそれを完全に機能させることができず、1つのコンパイルされたファイルで終わることが私にとって必要だったので、私は複数の問題に直面していました。

これは、私がreact-pdfに取り組んでおり、ユーザーがそれをインストールするのが非常に簡単でなければならないためです。 package.json +インポート、ブーム、その他何もありません。

webpackやbrowserifyなどの手順を書くことは言うまでもなく、pdf.worker.jsを自分で理解するように指示する方法はありません。

wojtekmaj picture wojtekmaj 2017年07月13日
👍1

ユーザーがインストールするのは非常に簡単でなければなりません。 package.json +インポート、ブーム、その他何もありません。

@wojtekmaj私はあなたの要件を本当に理解していません。 pdfjs-distの追加とpdfjs-dist / webpackの使用が、reactコンポーネントプロジェクトでどのように使用できなくなるかわかりません。 そして、ユーザーは前者（コンポーネントプロジェクト）を含めるだけです。

最終的に1つのコンパイル済みファイルで終わることは私にとって必要でした。

1つのコンパイル済みファイルはあなたが望むものではありません：a）ページの起動用、b）キャッシュと送信サイズ、c）ワーカーで起こりうる問題-しかしそれはあなたの選択です。

yurydelendik picture yurydelendik 2017年07月13日

@yurydelendik
ああ、すみません、あなたの前の投稿を読み間違えました。 まったく別の/ examples / webpackについて話していると思いました。 pdfjs / webpackを使用するように必ず更新する必要があります！ ありがとうございました！

もう1つ... pdfjs-dist / webpackを使用しても、pdf.js自体がpdf.worker.jsを単独で要求しようとするのを防ぐことはできません。 私は最終的に：

  • entry.bundle.js
  • abcdef1234567890.worker.bundle.js

pdf.workerをエントリの1つとして定義すると、さらに悪化し、次のようになります。

  • entry.bundle.js
  • abcdef1234567890.worker.bundle.js
  • pdf.worker.bundle.js

この問題を解決するにはどうすればよいですか？

wojtekmaj picture wojtekmaj 2017年07月13日

上記のreact-pdfの例でyarn buildを実行した後、次のファイルがあります。

...
File sizes after gzip:

  198.42 KB  build/7b14afe24b211632ecc8.worker.js
  197.76 KB  build/static/js/0.974e8de4.chunk.js
  130.14 KB  build/static/js/main.5a79c9e3.js
  4.19 KB    build/static/css/main.d852b162.css
...

これは正常です。アプリは「build / static / js / main.5a79c9e3.js」のもの（pdf.jsとreact）、「build / static / js /0.974e8de4.chunk.js」はpdf.worker.jsフォールバックコードです。ワーカーが無効で、「build /7b14afe24b211632ecc8.worker.js」ワーカーコードの場合に読み込まれます。 私は何かが足りないのですか？

@wojtekmajは、ユーザーのテストアプリで完全なreactコンポーネント（例？）を準備し、STRの別の問題で報告してください-あなたの特定の問題はこの問題に関連していないと思います。

yurydelendik picture yurydelendik 2017年07月14日

PDFJS.workerSrc = 'scripts.bundle.js';
PDFJS.getDocument（getPdfName）.then（（pdfFile：any）=> {
this.pdfFile = pdfFile;
this.renderPdfIntoPages（pdfFile、getPdfPages、this.pdfReady）;
}）;

このように値を割り当てると、その動作...

ありがとう...

wapappdeveloper picture wapappdeveloper 2018年03月17日

@yurydelendikソリューションを使用しているwindow未定義のエラーを受け取った場合は、

globalObject: 'true'

webpack設定のoutputセグメント。
webpackにバグがあるようです。 web workersを操作すると、webpackがwindowオブジェクトを台無しにします。 したがって、上記のハックはその問題を解決します。

vivektiwary picture vivektiwary 2018年10月26日

@wojtekmaj ：
あなたの解決策をありがとう！ Chrome、FF、Edge、Opera、Safariで問題なく動作します。 ただし、 babel-loaderから除外しても、ES5にトランスパイルされません。 そのため、IE11などで問題が発生します。 それとも私はそこに何かが欠けていますか？

schnetzi picture schnetzi 2018年11月06日

私はここで何か間違ったことをしているかもしれないので、賢い人たちを訂正してください、しかし私は@wojtekmajの思考の列を取り、それをはるかに簡単に機能させました。

webpack.configの場合：

...
{
    test: /pdf\.worker(\.min)?\.js$/,
    loader: 'file-loader'
},

そして、私のコードでは：

import PDFJS from 'pdfjs-dist';
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min';

PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;
...
varunarora picture varunarora 2019年06月18日
👍7

構成：

  • pdfjs-dist：2.1.266
  • webpack：4.35.0

ねえ、私はwebpackとpdfjs（そしてそれはワーカー）の使用に問題がありました。

私はそれが起こると思います（私は何かを確信するのに十分なpdfjsを知りません）

webpackのものが原因で、ワーカーを読み込もうとしてこのエラーが発生しました：

image

修正するものが見つかりませんでした。
vendors_pdfjsWorkerは存在しましたが、このパスにはありませんでした。 私の場合、ワーカーをpdf.jsと同じ場所に配置したいと思います。
wojtekmajが説明したように、最初はworkerSrcを変更しようとしました。 しかし、私のworkerSrcは、ワーカーを取得するためにpdfjsによって使用されませんでした。 Webpack解析変更pdfjs（l.9915）：

  if (typeof window === 'undefined') {
    isWorkerDisabled = true;

    if (typeof require.ensure === 'undefined') {
      require.ensure = require('node-ensure');
    }

    useRequireEnsure = true;
  } else if (typeof require !== 'undefined' && typeof require.ensure === 'function') {
    useRequireEnsure = true;
  }

に

  if (typeof window === 'undefined') {
    isWorkerDisabled = true;

    if (typeof require.ensure === 'undefined') {
      require.ensure = require('node-ensure');
    }

    useRequireEnsure = true;
  } else if (true) {
    useRequireEnsure = true;
  }

したがって、fakeWorkerFilesLoaderが設定されます（l.9932）：
fakeWorkerFilesLoader = useRequireEnsure ? function () {

次に、fakeWorkerFilesLoaderが定義されているためにworkerSrcが取得されません。

    var loader = fakeWorkerFilesLoader || function () {
      return (0, _dom_utils.loadScript)(_getWorkerSrc()).then(function () {
        return window.pdfjsWorker.WorkerMessageHandler;
      });
    };

どうやって解決したか

私のwebpack構成で追加しました：

    module: {
        noParse: (filename) => {
            return /\\node_modules\\pdfjs-dist\\build\\pdf.js/.test(filename);
        },
        rules: [
        .......................
        ]
    },

そして、私はこのエラーがありました：
image

スクリプト「ecm_viewer.worker.js」が存在しないと表示されます。
webpack設定にエントリを追加しました：

entry: {
    'ecm_viewer': getFileList(),
    'ecm_viewer.worker': './node_modules/pdfjs-dist/build/pdf.worker.entry',
}

また、noParse関数を削除しても、完全に機能します。 このnoParsewebpackオプションを追加するまで、実際のエラーをデバッグできませんでした。

私がこれを書くのに適切な場所にいるかどうかはわかりません; 投稿をstackoverflowまたは他の場所に移動できます。 それはいつか誰かを助けるかもしれません。

Barzou picture Barzou 2019年07月24日

webpackプロジェクトで同じ問題が発生しましたが、別の方法で解決しました。 webpackのバンドルやローダーに依存する代わりに、 CopyWebpackPluginを使用してワーカーソースをビルドディレクトリにコピーしました。

私のビューアで：

import pdfjsLib from 'pdfjs-dist';

if (process.env.NODE_ENV !== 'production') {
   //in dev, get it from the node_modules directory
   //NOTE: don't use the "entry" file -- the script will fail and the web worker will not be used
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/node_modules/pdfjs-dist/build/pdf.worker.js`;
} else {
   //in prod, get it from the build directory
   pdfjsLib.PDFJS.workerSrc = `${process.env.APP_ROOT}/build/pdf.worker.js`;
}

webpack.config.js ：

const CopyWebpackPlugin = require('copy-webpack-plugin');

return {
   //... rest of config omitted
   plugins: [{
      new CopyWebpackPlugin([{
         from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
         to: 'pdf.worker.js'
      }])
   }]
}

これにより、私のチームがWEEKSを探していた問題が修正されました。 ありがとう@ctowler ：D <3

Wolven531 picture Wolven531 2019年08月02日

@yurydelendikソリューションを使用しているwindow未定義のエラーを受け取った場合は、

globalObject: 'true'

webpack設定のoutputセグメント。
webpackにバグがあるようです。 web workersを操作すると、webpackがwindowオブジェクトを台無しにします。 したがって、上記のハックはその問題を解決します。

@vivektiwary同じ問題が発生しています。 ReferenceError: Can't find variable: windowと言い続けます

そのglobalObject:'true'設定をWebpack.configファイルに入れましたが、アプリがまったく読み込まれなくなりました。 うまくいきましたか？

taihuuho picture taihuuho 2019年10月29日

@yurydelendikソリューションを使用しているwindow未定義のエラーを受け取った場合は、

globalObject: 'true'

webpack設定のoutputセグメント。
webpackにバグがあるようです。 web workersを操作すると、webpackがwindowオブジェクトを台無しにします。 したがって、上記のハックはその問題を解決します。

@vivektiwary同じ問題が発生しています。 ReferenceError: Can't find variable: windowと言い続けます

そのglobalObject:'true'設定をWebpack.configファイルに入れましたが、アプリがまったく読み込まれなくなりました。 うまくいきましたか？

はい@taihuuho 、それを設定の出力objに入れましたか？
ところで、あなたが得ているエラーは何ですか？

vivektiwary picture vivektiwary 2019年10月30日

@vivektiwary私はこのエラーを取得していますReferenceError: Can't find variable: window使用したときにpdfjs-dist/webpack

taihuuho picture taihuuho 2019年10月30日

私はここで何か間違ったことをしているかもしれないので、賢い人たちを訂正してください、しかし私は@wojtekmajの思考の列を取り、それをはるかに簡単に機能させました。

webpack.configの場合：

...
{
    test: /pdf\.worker(\.min)?\.js$/,
    loader: 'file-loader'
},

そして、私のコードでは：

import PDFJS from 'pdfjs-dist';
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min';

PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;
...

私は@varunaroraのソリューションを使用することになり、それは本当にうまく機能します。 どうやら、Webpackhttps ： //github.com/mozilla/pdf.js/tree/master/examples/webpackのこのドキュメントページはすべての人に役立つとは限らないようです

taihuuho picture taihuuho 2019年10月30日
👍1

webpack構成を編集する必要はありません：

PDFJS.GlobalWorkerOptions.workerSrc = require('!!file-loader!pdfjs-dist/build/pdf.worker.min.js').default;

または

import PDFJS from 'pdfjs-dist';
import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';

PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;

もちろん、 file-loaderインストールされていることを確認してください。

私はelectron-forgeを使用しているため、ファイルローダーがワーカーをディレクトリに配置するため、

PDFJS.GlobalWorkerOptions.workerSrc = '../' + require('!!file-loader!pdfjs-dist/build/pdf.worker.min.js').default;

https://webpack.js.org/concepts/loaders/#inline

thomassuckow picture thomassuckow 2020年01月21日
👍4

ファイルローダーを使用すると、他のライブラリで必要になるため、アプリの残りの部分に何らかの副作用がありました。 したがって、私が見つけたもう1つの方法は、cdnからpdf.worker.jsファイルを取得することです。

ここを参照してください： https ：

Marcvander picture Marcvander 2020年06月03日
このページは役に立ちましたか？
5 / 5 - 1 評価

関連する問題

BrennanDuffey picture BrennanDuffey  ·  3コメント
xingxiaoyiyio picture xingxiaoyiyio  ·  3コメント
aaronshaf picture aaronshaf  ·  3コメント
dmisdm picture dmisdm  ·  3コメント
patelsumit5192 picture patelsumit5192  ·  3コメント