寻求帮助使 npm/pdfjs-dist 与 Webpack 和 Django 一起工作

Question

我一直在尝试用 npm install of 替换基于链接的 pdf.js 几个小时pdfjs-dist，因为我注意到我的链接不打算用作 cdns 并且可能变得不稳定，如here所述。

除了几个示例之外，我找不到关于如何使其工作的太多文档，并且当涉及 Webpack 时，它们主要与 React 一起使用，而我只是在 Django 框架中使用 ES6（在所需的 django 目录上静态编译，而不使用webpack 插件。）

在与一位从事 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。

在此修复程序合并在(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-loaderloading引起的NodeTargetPlugin，它反过来运行require("module")我认为（但我不是 100%）是针对本机节点模块的，当运行针对 web 的 Webpack 时，它是不相关的

这个问题可以通过 Webpack 配置来缓解

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

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

{
  node: {
    module: "empty"
  }
}

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

import pdfjsLib from "pdfjs-dist/webpack";

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

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

我的问题是，包装的WebPackpdf.worker.js作为esModule（默认为worker-loader），所以它的方式是require'd需要被解开与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部分很重要，因为您可能会陷入无限替换循环。

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

pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();

../我的路径中有一个，因为这段代码是在 storybooks.storybook/文件夹中执行的，所以我已经上一个目录去node_modules/

有了这两个变化，PDF.js 的一切似乎都在工作。

最后，如果你想忽略关于缺失FetchCompileWasmPlugin和FetchCompileAsyncWasmPlugin模块的警告，你可以设置 webpackIgnorePlugin忽略这些导入，我的假设是它们是基于 WASM 的，实际上并不需要

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当前安装的 Webpack 版本中的模块可能存在一些过时的不匹配，但是这些 WASM 模块对于我们的目的来说似乎不是必需的