[英]Looking for help to make npm/pdfjs-dist work with Webpack and Django
幾個小時以來,我一直在嘗試用 npm 安裝的pdfjs-dist
替換基於鏈接的 pdf.js,因為我注意到我的鏈接並不打算用作 cdns,並且可能會變得不穩定,如此處所述。
除了幾個例子,我找不到太多關於如何使它工作的文檔,當涉及 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
應該帶有一個零配置文件,甚至不需要為它設置一個 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;
})
}
但它沒有被編譯,我真的很感激一些指示。 提前致謝
這個問題似乎出現由於esModule
在介紹選項worker-loader@3.0.0
。
此修復程序已合並到(pre-release) pdjs-dist@2.6.347
您可以通過升級解決這個問題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%)是針對本機節點模塊的,當運行針對 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
),然后嘗試實例化該類:
pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();
我的問題是,包裝的WebPack pdf.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
部分,因為你最終可能會無限替換循環。
您需要將替換字符串修復為項目的正確路徑,這可能是
"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$/ })
]
我猜測當前安裝的 Webpack 版本中的worker-loader
和模塊可能存在一些過時的不匹配,但是這些 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';
或者你可以一直使用縮小版本
如果 webpack 由於可選鏈接而失敗,請考慮指向省略現代語法的舊版本。
import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.js'
代替
import * as pdfjs from 'pdfjs-dist'
它與:
var pdflib = require('pdfjs-dist/build/pdf.js');
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.js';
pdflib.GlobalWorkerOptions.workerPort = new pdfjsWorker();
Go轉
node_modules/pdfsj-dist/package.json
在
"peerDependencies": {
"worker-loader": "^3.0.8" -> Version
},
安裝版本
npm 我 worker-loader@3.0.8
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.