web-dev-qa-db-fra.com

Vous recherchez de l'aide pour faire fonctionner NPM / PDFJS-dist avec WebPack et Django

J'essaie quelques heures de remplacement d'un fichier pdf.js basé sur la liaison avec une installation NPM de pdfjs-dist, puisque j'ai remarqué que mes liens ne devaient pas être utilisés comme des CDN et pourraient devenir instables comme décrit ici .

Je ne pouvais pas trouver beaucoup de documentation sur la façon de faire ce travail autre que quelques exemples, et lorsque la page Web est impliquée, elles sont principalement avec réaction, tandis que j'utilise simplement ES6 dans un Django Cadre (statique Compilation du répertoire souhaitée Django, sans utiliser le plug-in WebPack.)

Après échanger plusieurs messages avec l'un des gars qui fonctionnent sur pdf.js Il semblait que mes erreurs de compilation étaient probablement dues à la manière dont la webpack gère à l'intérieur de la bibliothèque. Voici ce que je vois:

WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileAsyncWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
 @ ./node_modules/worker-loader/dist/index.js
 @ ./node_modules/worker-loader/dist/cjs.js
 @ ./node_modules/pdfjs-dist/webpack.js
 @ ./src/js/views/pdfViews.js
 @ ./src/js/index.js

WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
 @ ./node_modules/worker-loader/dist/index.js
 @ ./node_modules/worker-loader/dist/cjs.js
 @ ./node_modules/pdfjs-dist/webpack.js
 @ ./src/js/views/pdfViews.js
 @ ./src/js/index.js

ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/webpack/lib/node'
 @ (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
 @ ./node_modules/worker-loader/dist/index.js
 @ ./node_modules/worker-loader/dist/cjs.js
 @ ./node_modules/pdfjs-dist/webpack.js
 @ ./src/js/views/pdfViews.js
 @ ./src/js/index.js
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/src-select.html] 4.57 KiB {HtmlWebpackPlugin_0} [built]
Child worker-loader node_modules/pdfjs-dist/build/pdf.worker.js:
              Asset      Size      Chunks             Chunk Names
    index.worker.js  1.33 MiB  pdf.worker  [emitted]  pdf.worker
    Entrypoint pdf.worker = index.worker.js
    [./node_modules/pdfjs-dist/build/pdf.worker.js] 1.25 MiB {pdf.worker} [built]
    [./node_modules/process/browser.js] 5.29 KiB {pdf.worker} [built]
ℹ ｢wdm｣: Failed to compile.

Théoriquement le pdfjs-dist Devrait venir avec un fichier de configuration zéro, sans même avoir besoin de configurer un travailleur pour cela, de sorte que le code comme celui ci-dessous devrait Travailler:

import pdfjsLib from 'pdfjs-dist/webpack'

////////////////////////////////////////////
//// instantiate pdf
export const pdfView = () => {
  // pdfjsLib.GlobalWorkerOptions.workerSrc = 'index.worker.js';

  // var defined through a Django template tag
  const loadingTask = pdfjsLib.getDocument(pdfData.myPdfDoc)

  pdfData.myPdf = loadingTask.promise.then(pdf => {
    pdfData.pdfTotalPageN = pdf.numPages;
    return pdf;
  })
}

mais cela ne se compose pas, et j'apprécierais vraiment certains indicateurs. Merci d'avance

javascriptdjangonpmwebpackpdfjs-dist
3
Giampaolo Ferradini

Si vous allez bien avec l'utilisation d'un CDN, utilisez ceci

import pdfJS from 'pdfjs-dist/build/pdf.js';
pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js';

Assurez-vous d'importer des versions minissiques sur la production

import pdfJS from 'pdfjs-dist/build/pdf.min.js';
pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js';

Ou vous pouvez simplement utiliser des versions minifiées tout le temps

0
zoran404