寻找帮助以使npm / pdfjs-dist与Webpack和Django一起使用

如何解决寻找帮助以使npm / pdfjs-dist与Webpack和Django一起使用

我已经尝试了几个小时，将npm安装的pdfjs-dist替换为基于链接的pdf.js，因为我注意到我的链接不打算用作CDN，并且可能会变得不稳定。 described here。

除了几个示例外，我没有找到太多有关如何实现该功能的文档，当涉及Webpack时，它们大多与React一起使用，而我只是在Django框架中使用ES6（在所需django目录上静态编译），而无需使用webpack插件。）

在exchanging several messages和一位从事pdf.js工作的人接触之后，看来我的编译错误可能是由于Webpack如何在内部处理库。这是我所看到的：

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.

从理论上讲，pdfjs-dist应该带有一个零配置文件，甚至不需要为其设置一个工作程序，因此下面的代码应能正常工作：

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;
  })
}

但是它没有被编译，我真的很感谢一些指针。预先感谢

解决方法

此问题似乎是由于esModule中引入的worker-loader@3.0.0选项引起的。

(pre-release) pdjs-dist@2.6.347中的fix for this was merged

您可以通过将pdfjs-dist升级到v2.6.347或将worker-loader降级到v2.0.0来解决此问题

我只需要自己解决这个问题...

此问题

Module not found: Error: Can't resolve 'module' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/webpack/lib/node'

是由worker-loader加载NodeTargetPlugin引起的，而该加载又运行require("module")，我认为（但我不是100％）是本机节点模块，在运行目标Webpack时与网络无关

使用Webpack配置可以缓解此问题

{
  node: {
    module: "empty"
  }
}

此后，事情发展得更远了，但我需要进一步的缓解措施：

import pdfjsLib from "pdfjs-dist/webpack";

这会运行pdfjs-dist/webpack.js:27，

var PdfjsWorker = require("worker-loader!./build/pdf.worker.js");

正在尝试加载pdf.worker.js（应该打包worker-loader），然后尝试实例化该类：

pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();

我遇到的问题是，Webpack将pdf.worker.js打包为esModule（worker-loader的默认值），因此需要使用default属性将其打包在导入的esModule上（换句话说，实例化必须为new PdfjsWorker.default()

我能够使用NormalModuleReplacementPlugin插件来减轻这种情况，该插件能够根据正则表达式匹配/替换来重写require语句，该匹配器匹配原始的require字符串并将其替换为设置worker-loader选项esModule=false，然后是本地系统上pdf.worker.js文件的绝对路径：

new webpack.NormalModuleReplacementPlugin(
  /worker-loader!\.\/build\/pdf\.worker\.js$/,"worker-loader?esModule=false!" + path.join(__dirname,"../","node_modules","pdfjs-dist","build","pdf.worker.js")
)

重要的是匹配完整的/worker-loader!\.\/build\/pdf\.worker\.js$/原始原始要求字符串，而不仅仅是pdf.worker.js部分，因为您可能会陷入无限的替换循环中。

您需要将替换字符串修复为项目的正确路径，可能为

"worker-loader?esModule=false!" + path.join(__dirname,"pdf.worker.js")

我的路径中有一个../，因为此代码是在故事书.storybook/文件夹中执行的，所以我上了一个目录，进入了node_modules/

通过这两个更改，PDF.js的所有功能似乎都可以正常工作。

最后，如果您想忽略有关缺少的FetchCompileWasmPlugin和FetchCompileAsyncWasmPlugin模块的警告，则可以将webpack IgnorePlugin设置为仅忽略这些导入，我认为它们是基于WASM，并非真正需要

plugins: [
  new webpack.IgnorePlugin({ resourceRegExp: /FetchCompileWasmPlugin$/ }),new webpack.IgnorePlugin({ resourceRegExp: /FetchCompileAsyncWasmPlugin$/ })
]

我猜想worker-loader和当前安装的Webpack版本中的模块可能有些过时的不匹配，但是这些WASM模块似乎对于我们的目的不是必需的

如果您满意使用CDN，请使用此

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';

确保在生产中导入缩小版本

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';

或者您可以一直使用缩小版本

它可以和：

var pdflib = require('pdfjs-dist/build/pdf.js');
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.js';
pdflib.GlobalWorkerOptions.workerPort = new pdfjsWorker();