寻求帮助使npm/pdfjs-dist与Webpack和Django合作

Question

几个小时以来，我一直在尝试用npm安装的pdf.js替换基于链接的pdfjs-dist，因为我注意到我的链接不打算用作cdns，并且可能会变得不稳定，就像在此描述一样。

除了几个例子之外，我找不到很多关于如何实现这个功能的文档，当Webpack参与其中时，他们主要是使用React，而我只是在Django框架中使用ES6 (在所需的django目录上进行静态编译，而不使用webpack-plugin)。

在交换几条消息和一位在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;
  })
}

但是它没有被编译，我很想知道一些建议。提前感谢

Answer 1

这个问题似乎是由于在esModule中引入了worker-loader@3.0.0选项而出现的。

对此的修正已合并 in (pre-release) pdjs-dist@2.6.347

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

Answer 2

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

这个问题

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

是由worker-loader loading NodeTargetPlugin引起的，它反过来运行require("module")，我认为这是针对本地节点模块的(但我不是100%)，在运行Webpack时，这些模块与web无关

这个问题可以通过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的缺省值)，因此它所需的方式需要在导入的esModule上使用default属性(换句话说，实例化必须是new PdfjsWorker.default() )。

我能够用NormalModuleReplacementPlugin插件来减轻这一点，它能够基于regex匹配/替换重写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, "node_modules", "pdfjs-dist", "build", "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模块似乎对我们来说并不是必要的。

Answer 3

如果您对使用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';

或者你可以一直使用小型化版本