Pdf.js: Webpack 지침으로 인해 여전히 '가짜 작업자'가로드 됨

에 만든 2016년 09월 07일 · 32코멘트 · 출처: mozilla/pdf.js

구성 :

웹 브라우저 및 버전 : 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 가 스크립트)이므로 실제 작업자가이 논리도 사용할 수없는 이유가 혼란 스럽습니다.
workerSrc 에서 생성 된 1.bundle.js 파일을 가리키고 심지어 webpack의 작업자 로더 를 사용하여 PDFWorker ( pdflib.PDFJS.PDFWorker = require('worker!pdfjs-dist/build/pdf.worker.entry.js') )를 인스턴스화하고 대체하려고 시도했지만 그렇지 않았습니다. 작동하지 않으므로 작업자가 webpack을 사용하는 방법에 대해 완전히 잃어 버렸어요.

1-other

출처

agilgur5

👍4

가장 유용한 댓글

내 웹팩 프로젝트에서 동일한 문제가 발생했지만 다르게 해결했습니다. 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 에 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 모듈을 포함하는 번들 출력으로 생성 한 pdf.worker.bundle.js 파일 (pdfjs-dist에서 가져옴)

문제에 대한 설명이 명확하지 않습니다. 완전한 예제 소스 코드를 제공 할 수 있습니까?

yurydelendik 에 2016년 09월 08일

👍2

bundle.js에 작업자가 포함되어 있는지 확인하십시오. (페이지 로딩 성능 및 크기로 인해) 거기에있는 것이 잘못되었습니다. 전체 pdf.worker.js 파일은 별도의 번들에 배치됩니다.

동봉 된 코드를 확인하고 작업자가 포함되어 있지 않음을 확인할 수 있습니다. 앞서 언급했듯이 작업자 스크립트는 1.bundle.js 번들로 제공됩니다. PDF를로드 할 때 1.bundle.js 대한 스크립트 태그가 내 <head> 태그에 삽입됩니다 (PDFJS 또는 웹팩에서 가져온 것인지 확실하지 않음).

pdf.worker.js 모듈을 포함하는 번들 출력으로 생성 한 pdf.worker.bundle.js 파일 (pdfjs-dist에서 가져옴)

node_modules 에서 작업자 스크립트를로드하는 Wiki의 첫 번째 방법이며 선호하는 방법을 사용하는 예제가 있습니까? 위키 섹션에서 : "작업자는 별도의 번들로 빌드됩니다."./node_modules/pdfjs-dist/build/pdf.worker.entry.js "파일 가져 오기"

@yurydelendik 더 이상 코드베이스에없는 것처럼 보이는 # 6595에서 작업자의 자동 감지 /로드에 대해 자세히

문제에 대한 설명이 명확하지 않습니다. 완전한 예제 소스 코드를 제공 할 수 있습니까?

도움이되거나 관련성이별로 없기 때문에 소스 코드를 첨부하지 않았지만 여기에 50 줄 요약이 있습니다. http://pastebin.com/raw/PHs6bfby. file 인수는 말 그대로 <input type='file' /> 요소의 파일입니다.

agilgur5 에 2016년 09월 08일

👍1

@yurydelendik 더 이상 코드베이스에없는 것처럼 보이는 # 6595에서 작업자의 자동 감지 /로드에 대해 자세히

이 기능은 번 들러 / 패키저 용이 아닙니다.

pdf.js를 사용하는 라이브러리를 구축 중이므로 누군가가 내 라이브러리를 작동시키기 위해 pdf.js 코드를 가져와야한다면 약간 성 가실 것입니다 (종속성 종속성 관리).

지금까지 우리는 웹 작업자를 적절하게 관리하는 번 들러를 찾지 못했고 웹팩이나 브라우저 화에 대한 선호도를 부여하고 싶지 않습니다. 동시에 둘 다 지원하는 데 문제가있었습니다.

해결책은 종속성의 종속성을 관리하는 것이 간단하지 않은 것입니다. 그러나 PDF의 효율적인 구문 분석 및 렌더링은 간단한 작업이 아닙니다. 웹 워커 사용을 포기하고 자유롭게 할 수 있다면 UI 성능이 저하되고 트레이드 오프가 될 것입니다.

유용하거나 관련성이별로 없기 때문에 소스 코드를 첨부하지 않았습니다.

달성하려는 의도를 보여주는 라이브러리의 작은 예를 게시 할 수 있습니다. 제공된 코드 스 니펫은 유용하지 않습니다. 실행 가능하지 않고 수행하려는 작업이 아닌 라이브러리입니다.

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 에 2016년 09월 09일

이 기능은 번 들러 / 패키저 용이 아닙니다.

몰랐어요 👍

지금까지 우리는 웹 작업자를 적절하게 관리하는 번 들러를 찾지 못했고 웹팩이나 브라우저 화에 대한 선호도를 부여하고 싶지 않습니다. 동시에 둘 다 지원하는 데 문제가있었습니다.
해결책은 종속성의 종속성을 관리하는 것이 간단하지 않은 것입니다. 그러나 PDF의 효율적인 구문 분석 및 렌더링은 간단한 작업이 아닙니다. 웹 워커 사용을 포기하고 자유롭게 할 수 있다면 UI 성능이 저하되고 트레이드 오프가 될 것입니다.

@yurydelendik 나는 당신과 동의하지만 그 절충안이 만들어 질 필요가 없다고 생각합니다. 웹팩은이 노동자 로더 및 Browserify는이 webworkify이 - 들러 시스템을 감지하고 하나를 사용하거나, 다른 하나는이 문제를 완전히 해결하지 않을까요?

여기에서 할 수있는 것처럼 보입니다 : https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L1132 , 작업자 항목에 대한 직접 경로를 사용하여
웹팩의 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 에 2016년 09월 09일

Webpack에는 작업자 로더가 있고 Browserify에는 webworkerify가 있습니다. 번 들러 시스템을 감지하지 못하고 둘 중 하나를 사용하면이 문제가 완전히 해결됩니까?

예, # 6785에서 시도하고 나중에 # 6791에서 시도한 다음 되돌 렸습니다. require('worker!... 있으면 browserify에서 문제가 발생하고 require('webworkerify')(...) 가 webpack에서 발생합니다.

내가 그것으로 마크를 쳤다고 생각한다면, 나는 그것에 대한 PR을 작성하게되어 기쁩니다.

예, 일하는 PR이 있으면 정말 좋습니다. 지금까지 pdfjs-dist는 어떻게 든 webpack과 함께 작동하고, system.js 및 node.js와 함께 브라우저 화됩니다. 그리고 우리는 그것을 이렇게 유지하려고 노력할 것입니다. 감사.

또한 어떤 이유로 작업자를 사용할 수없는 경우 (보안 또는 레거시 브라우저) 코드를 스크립트 태그로로드해야합니다. 웹 작업자를 매개 변수로 받아들이는 PDFWorker에 오버로드 된 생성자를 추가 할 계획이었습니다. 이것은 일부 webpack / browserify 사용 사례에 대한 대체 솔루션을 제공 할 수 있습니다.

yurydelendik 에 2016년 09월 09일

👍2

btw, webpack에는 workerSrc와 함께 사용할 수있는 엔트리 로더가 있습니다.

yurydelendik 에 2016년 09월 09일

👍1

예, # 6785에서 시도하고 나중에 # 6791에서 시도한 다음 되돌 렸습니다. require ( 'worker! ...는 browserify에서 문제를 일으키고, require ('webworkerify ') (...)는 webpack에서 발생합니다.

하지만 __webpack_require__ 여기에서 확인하지 않겠습니까?
https://github.com/mozilla/pdf.js/pull/6785/commits/79c2f69c3288494c5ce2809182c896484bf4be5c#diff -5f93a8d6c23cf0a169c6ee7347477ce8R30은 browserify가 해당 문을 구문 분석하지 못하도록 차단합니까? ( ensure 부분이 문제를 일으키는 지 확실하지 않음)

예, 일하는 PR이 있으면 정말 좋습니다. 지금까지 pdfjs-dist는 어떻게 든 webpack과 함께 작동하고, system.js 및 node.js와 함께 브라우저 화됩니다. 그리고 우리는 그것을 이렇게 유지하려고 노력할 것입니다. 감사.

다음 주 후반에이 내용에 대해 설명 할 것입니다. 다양한 번 들러 / 플랫폼을 확인하기 위해 실행할 테스트가 있습니까?

웹 작업자를 매개 변수로 받아들이는 PDFWorker에 오버로드 된 생성자를 추가 할 계획이었습니다. 이것은 일부 webpack / browserify 사용 사례에 대한 대체 솔루션을 제공 할 수 있습니다.

나는 이것이 환상적인 대안이 될 것이라고 생각합니다! 특히 Worker 클래스를 받아 들일 수 있다면 webpack 사람들은 다음과 같은 것을 사용할 수 있습니다 : webworkify-webpack 및 webworkify를 사용하고 loader / Worker를 인수로 전달합니다. 그래서 그것은
오버로드 된 경우 var worker = new WorkerFromArgs('../pdf.worker.entry.js') .
이것은 작업자 로더 로직의 구성을 사용자 영역으로 오프로드하므로 플랫폼 / 번 들러를 pdf.js로 확인하는 잠재적으로 지저분한 PR이 필요하지 않습니다 (어쨌든 적절한 로더를 설치하는 것은 사용자에게 있습니다).

agilgur5 에 2016년 09월 09일

그러나 경고 : 가짜 작업자 설정. ' 실제로 문서를로드 할 때 콘솔에서 지침이 작동하지 않는 것처럼 보입니다.

훌륭하지만 위에서 언급했듯이 완전한 예제 없이는 문제를 해결할 수 없습니다. 이걸 닫고 PR을 기다릴까요?

yurydelendik 에 2016년 09월 09일

@jlchereau 는 https://github.com/mozilla/pdf.js/issues/7612#issuecomment -245973303 하나의 예를 제공했습니다. 콘솔에서 Warning: Setting up fake worker 를 비슷하게 볼 수 있고 필요한 경우 다른 것을 줄 수 있습니다.

이 문제는 workerSrc 이 현재 구현에서 작동하지만 작동하지 않기 때문에 여전히 관련이 있습니다.
어쨌든 PR은이 문제를 해결할 것이므로 그때까지 추적을 위해 열어두면 안됩니까?

PR을 시작하기 전에 위의 질문에 대한 귀하의 피드백을 듣고 싶습니다 ( __webpack_require__ 확인하려고 할 때 browserify가 불만을 제기 한 이유에 관해서는 PR에서도 똑같이 할 것입니다. 모든 번 들러 / 플랫폼을 동시에 테스트하기 위해 실행)

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 에 2016년 09월 10일

@yurydelendik 아직 @jlchereau 의 예를 확인하지 않은 것 같습니다. 또한 pdf-to-dataURL을이 버그를 나타내는 작은 패키지로 만들었습니다.

웹 작업자를 매개 변수로 받아들이는 PDFWorker에 오버로드 된 생성자를 추가 할 계획이었습니다. 이것은 일부 webpack / browserify 사용 사례에 대한 대체 솔루션을 제공 할 수 있습니다.

이것에 대한 업데이트가 있습니까? 이전에 언급했듯이 이것이 제가 제안한 것보다 훨씬 더 나은 솔루션이라고 생각합니다 (제가 질문에 답하지 않았기 때문에 어쨌든 실제로 PR을 만들 수 없었습니다). 다른 번 들러.

agilgur5 에 2016년 10월 01일

👍2

내 뷰어에서 :

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 에 2016년 11월 07일

👍21 ❤5 🎉4

@ agilgur5 , 방금이 문제가 발생했으며 CommonsChunkPlugin을 사용했기 때문입니다. 제 경우에는 웹 작업자가로드 중이었지만 Uncaught ReferenceError: webpackJsonp is not defined 오류가 발생했습니다 (코드가 공통 청크로 가져와 작업자가 사용할 수 없었기 때문입니다). 이로 인해 작업자가 일찍 종료되고 가짜 구현으로 대체되었습니다.

CommonsChuckPlugin을 사용하거나 @ctowler가 제안한 솔루션을 사용할 수 없습니다.

이것이 문제를 해결하기를 바랍니다.

mkennedy3000 에 2016년 12월 20일

모두 안녕,
pdf.js를 Webpack과 함께 사용하기 위해 많은 노력을 기울였습니다. 핵심은 작업자가 별도의 파일에있는 것을 원하지 않는다는 것입니다.

누군가 다음과 같은 문제에 직면 한 경우 :

Warning: Setting up fake worker. 메시지,
작동하지 않는 PDF.js 작업자로 휴지통 번들을 생성하는 Webpack,
번들에 작업자를 두 번 포함하는 Webpack,
당신은 확실히 봐야합니다.

단계적으로

파일을 일반 텍스트로 가져올 수 있도록 package.json에 raw-loader 했습니다.
```
"raw-loader": "latest",
```

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',
      },
    ],
  },

이제 까다로운 부분이 있습니다. 작업자를 PDF.js로 전달하는 유일한 방법은 workerSrc 설정을 사용하는 것입니다. 불편하게도
```
pdfjsLib.PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker');
```
작동하지 않습니다.
그러나! 우리는 Blob s에서 즉석에서 URL을 만들 수 있고 문자열에서 즉석에서 Blob s를 만들 수 있습니다!
그래서 나를위한 작업 솔루션은 다음과 같습니다.
```
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
한 가지 더. 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에 다음과 같이 한 모듈을 다른 모듈로 교체하도록 지시합니다.
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 에 2017년 07월 13일

👍12

@wojtekmaj 우리는 webpack 사용자를위한 제로 구성을 위해 pdfjs-dist / webpack을 추가했습니다. https://github.com/yurydelendik/pdfjs-react 에서 사용법을 확인할 수 있습니다.

yurydelendik 에 2017년 07월 13일

❤17

@yurydelendik 감사합니다, 예, 저는 이것을 알고있었습니다. 완전히 작동하도록 관리하지는 못했지만 하나의 컴파일 된 파일로 끝나는 것이 필요했기 때문에 여러 문제에 직면했습니다.

그 이유는 내가 react-pdf를 작업

webpack, browserify 및 기타에 대한 지침을 작성하는 것은 말할 것도없고 pdf.worker.js를 스스로 파악하라고 말할 수있는 방법은 없습니다.

wojtekmaj 에 2017년 07월 13일

👍1

내 사용자가 쉽게 설치할 수 있어야합니다. package.json + import, boom, 다른 것은 없습니다.

@wojtekmaj 나는 당신의 요구 사항을 정말로 이해하지 못합니다. pdfjs-dist를 추가하고 pdfjs-dist / webpack을 사용하는 것이 반응 구성 요소 프로젝트에서 사용하는 것이 어떻게 불가능할지 모르겠습니다. 그리고 사용자는 전자 (구성 요소 프로젝트) 만 포함합니다.

하나의 컴파일 된 파일로 끝나는 것은 나에게 필요했습니다.

하나의 컴파일 된 파일은 당신이 원하는 것이 아닙니다 : a) 페이지 시작, b) 캐싱 및 전송 크기, c) 작업자의 가능한 문제-하지만 당신의 선택입니다.

yurydelendik 에 2017년 07월 13일

안녕하세요.
죄송합니다. 이전 게시물을 잘못 읽었습니다. 나는 당신이 완전히 다른 / examples / webpack에 대해 이야기하고 있다고 생각했습니다. pdfjs / webpack을 사용하도록 확실히 업데이트해야합니다! 감사합니다!

한 가지 더 ... pdfjs-dist / webpack을 사용한다고해서 pdf.js 자체가 pdf.worker.js를 요구하는 것을 막을 수는 없습니다. 나는 다음으로 끝납니다.

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

pdf.worker를 항목 중 하나로 정의하면 더 나 빠지고 다음 과 같이 끝납니다.

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

이 문제를 어떻게 해결합니까?

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 사용자의 테스트 앱으로 완전한 반응 구성 요소 (예?)를 준비하고 STR과 함께 별도의 문제로보고하십시오-특정 문제가이 문제와 관련이 없다고 생각합니다.

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 에 2018년 03월 17일

@yurydelendik 솔루션을 사용하는 동안 누군가 window 정의되지 않은 오류를 받으면

globalObject: 'true'

웹팩 구성의 output 세그먼트에서.
webpack에 버그가있는 것 같습니다. web workers 작업 할 때 webpack이 window 객체를 엉망으로 만듭니다. 따라서 위의 해킹은 그 문제를 해결합니다.

vivektiwary 에 2018년 10월 26일

@wojtekmaj :
솔루션에 감사드립니다! Chrome, FF, Edge, Opera, Safari에서 잘 작동합니다. 그러나 babel-loader 에서 제외하면 ES5로 다시 변환되지 않습니다. 그래서 IE11 등에서 문제가 발생합니다. 아니면 거기에 뭔가 빠졌나요?

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 에 2019년 06월 18일

👍7

구성 :

pdfjs-dist : 2.1.266
웹팩 : 4.35.0

이봐, 나는 webpack과 pdfjs를 사용하는 데 문제가 있었다.

내가 생각하는 것 (나는 아무것도 확신 할만큼 pdfjs를 모른다)

webpack 물건으로 인해 작업자를로드하려고 시도하는 동안이 오류가 발생했습니다.

나는 그것을 고칠 어떤 것도 찾을 수 없었다.
vendor_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 () {

그런 다음 내 workerSrc가 fakeWorkerFilesLoader가 정의되어 있기 때문에 얻을 수 없습니다.

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

어떻게 해결했는지

내 웹팩 구성에서 다음을 추가했습니다.

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

그리고이 오류가 발생했습니다.

내 스크립트 "ecm_viewer.worker.js"가 존재하지 않는다는 메시지가 표시됩니다.
내 webpack 구성에 항목을 추가했습니다.

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

그리고 noParse 함수를 제거하더라도 완벽하게 작동합니다. 이 noParse webpack 옵션을 추가 할 때까지 실제 오류를 디버깅 할 수 없었습니다.

내가이 글을 쓰기에 적절한 위치에 있는지 모르겠습니다. 내 게시물을 stackoverflow 또는 다른 곳으로 이동할 수 있습니다. 언젠가 누군가에게 도움이 될 수 있습니다.

Barzou 에 2019년 07월 24일

내 뷰어에서 :

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 에 2019년 08월 02일

@yurydelendik 솔루션을 사용하는 동안 누군가 window 정의되지 않은 오류를 받으면
globalObject: 'true'
웹팩 구성의 output 세그먼트에서.
webpack에 버그가있는 것 같습니다. web workers 작업 할 때 webpack이 window 객체를 엉망으로 만듭니다. 따라서 위의 해킹은 그 문제를 해결합니다.

@vivektiwary 같은 문제가 발생했습니다. 계속 ReferenceError: Can't find variable: window

Webpack.config 파일에 globalObject:'true' 설정을 넣었지만 이제 앱이 전혀로드되지 않습니다. 작동 했나요?

taihuuho 에 2019년 10월 29일

@yurydelendik 솔루션을 사용하는 동안 누군가 window 정의되지 않은 오류를 받으면
globalObject: 'true'
웹팩 구성의 output 세그먼트에서.
webpack에 버그가있는 것 같습니다. web workers 작업 할 때 webpack이 window 객체를 엉망으로 만듭니다. 따라서 위의 해킹은 그 문제를 해결합니다.
@vivektiwary 같은 문제가 발생했습니다. 계속 ReferenceError: Can't find variable: window
Webpack.config 파일에 globalObject:'true' 설정을 넣었지만 이제 앱이 전혀로드되지 않습니다. 작동 했나요?

예 @taihuuho , 구성의 출력 obj에 넣었습니까?
btw 당신이 얻는 오류는 무엇입니까?

vivektiwary 에 2019년 10월 30일

@vivektiwary 나는이 오류를 얻고있다 ReferenceError: Can't find variable: window 사용할 때 pdfjs-dist/webpack

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 의 솔루션을 사용하게 https://github.com/mozilla/pdf.js/tree/master/examples/webpack에 대한이 문서 페이지는 모든 사람에게 작동하지 않는 것 같습니다.

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 에 2020년 01월 21일

👍4

파일 로더를 사용하면 다른 librairies가 필요하기 때문에 내 앱의 나머지 부분에 부작용이있었습니다. 그래서 내가 찾은 다른 방법은 cdn에서 pdf.worker.js 파일을 얻는 것입니다.

cf 여기 : https://github.com/wojtekmaj/react-pdf/issues/321#issuecomment -451291757

Marcvander 에 2020년 06월 03일

이 페이지가 도움이 되었나요?

5 / 5 - 1 등급

Pdf.js: Webpack 지침으로 인해 여전히 '가짜 작업자'가로드 됨

가장 유용한 댓글

모든 32 댓글

단계적으로

내가 생각하는 것 (나는 아무것도 확신 할만큼 pdfjs를 모른다)

어떻게 해결했는지

관련 문제