寻求帮助 npm/pdfjs-dist 使用 Webpack 和 Django

Question

几个小时以来，我一直在尝试用 pdfjs-dist 的 npm 安装替换基于 link 的 pdf.js，因为我注意到我的 links不打算用作 cdns，并且可能变得不稳定，如 described here.

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

在 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 应该带有一个零配置文件，甚至不需要为它设置一个 worker，所以下面的代码应该可以工作：

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

如果你不介意使用 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';

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

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 加载 NodeTargetPlugin 引起的，它反过来运行 require("module") 我认为（但我不是 100%）是针对本机节点模块的，当运行针对 web 的 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 应该是打包的）然后尝试实例化 class:

pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();

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

我可以使用 NormalModuleReplacementPlugin 插件来缓解这个问题，它能够 re-write 基于正则表达式 match/replace 的 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$/ 的完整原始 require 字符串，而不仅仅是 pdf.worker.js 部分，因为您可能会陷入无限替换循环。

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

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

我的路径中有一个 ../ 因为这段代码是在 storybooks .storybook/ 文件夹中执行的，所以我必须上一个目录才能到达 node_modules/

通过这两项更改，PDF.js 的一切似乎都正常工作。

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

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

我猜 worker-loader 和当前安装的 Webpack 版本中的模块可能有一些 out-of-date 不匹配，但这些 WASM 模块似乎不是我们的目的所必需的

Answer 3

它适用于：

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

Answer 4

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

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

您可以通过将 pdfjs-dist 升级到 v2.6.347 或将 worker-loader 降级到 v2.0.0

来解决此问题

Answer 5

如果 webpack 由于可选链接而失败，请考虑指向省略现代语法的旧版本。

import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.js'

而不是

import * as pdfjs from 'pdfjs-dist'

Answer 6

转到

node_modules/pdfsj-dist/package.json

在

"peerDependencies": {
    "worker-loader": "^3.0.8" -> Version
 },

安装版本

npm i worker-loader@3.0.8

寻求帮助 npm/pdfjs-dist 使用 Webpack 和 Django

Looking for help to make npm/pdfjs-dist work with Webpack and Django

javascript

django

npm

webpack

pdfjs-dist