使pdf.js 1.5和require.js一起玩好

在我的項目中，我一直使用require.js和pdf.js庫。直到最近，Pdf.js一直把它放在全局對象上。我仍然可以使用墊片在我的requirejs配置中使用它。 pdfjs庫將依次加載另一個名爲pdf.worker的庫。爲了找到這個模塊，解決方案是將一個屬性添加到名爲workerSrc的全局PDFJS對象並指向磁盤上的文件。這可以在加載pdfjs庫之前或之後完成。 pdfjs庫使用pdf.worker來啓動WebWorker，並且這樣做需要源文件的路徑。使pdf.js 1.5和require.js一起玩好

當我嘗試將我的項目中的pdfjs庫更新爲新版本（1.5.314）時，加載和包含庫的方式已更改爲使用UMD模塊，現在一切都變得棘手。

pdfjs庫檢查環境是否使用requirejs，因此它將自己定義爲名爲「pdfjs-dist/build/pdf」的模塊。當這個模塊加載時，它檢查一個名爲「pdfjs-dist/build/pdf.worker」的模塊。因爲我還有一個文件夾結構，我已經將它們添加到我的requirejs配置對象使用一個新路徑：

paths: { 
    "pdfjs-dist/build/pdf": "vendor/pdfjs/build/pdf", 
    "pdfjs-dist/build/pdf.worker": "vendor/pdfjs/build/pdf.worker" 
}

這是爲了使模塊加載程序才能找到這些模塊都沒有。在開發中，這很有效。當我嘗試在grunt構建步驟中使用requirejs優化器時，它會將我所有的項目文件放入一個文件中。這一步將嘗試包括pdf.worker模塊以及與此產生一個錯誤：

Error: Cannot uglify2 file: vendor/pdfjs/build/pdf.worker.js. Skipping it. Error is: RangeError: Maximum call stack size exceeded

由於工人源需要在磁盤上的一個文件我不希望被納入該模塊做。所以我試過了requirejs配置中的兩個不同的配置設置。第一次嘗試是覆蓋在我的咕嚕構建選項的路徑屬性：

paths: { 
    "pdfjs-dist/build/pdf.worker": "empty:" 
}

測試的第二件事是從我的模塊排除：

modules: [{ 
    name: "core/app", 
    exclude: [ 
     "pdfjs-dist/build/pdf.worker" 
    ] 
}]

這兩種技術應該告訴優化不包括模塊，但是兩次嘗試都以與之前相同的錯誤結束。 requirejs優化器仍然嘗試將模塊包含到構建中，並且嘗試使用它來結束RangeError。

有人可能會爭辯說，由於uglify步驟失敗，它不會被包括在內，我可以討論我的業務，但是如果uglify步驟應該開始工作在pdfjs的新更新 - 那麼呢？

任何人都可以幫我弄清楚爲什麼requirejs配置不會在構建步驟中排除它，以及如何讓它這樣做。

來源

2016-07-11 Tryggve

看看https://github.com/mozilla/pdf.js/tree/master/examples/webpack或https://github.com/mozilla/pdf.js/tree/master/examples/browserify是否會讓它更清晰或有幫助 - 並非所有捆綁商都能很好地使用pdf.js。 uglify錯誤是不同的（請參閱https://github.com/mozilla/pdf.js/issues/7044）並需要解決方法才能使其在Chrome上運行。 – async5

我遇到的uglify錯誤不是在運行期間出現的，您所提到的錯誤似乎就是這種情況。我的問題發生在使用r.js的構建步驟中。我遇到的問題是，當我告訴它不要時，優化器仍然嘗試拾取工作文件。 – Tryggve

Right，webpack和browserify使用package.json來忽略它。有[問題（S）]（https://github.com/mishoo/UglifyJS2/search?q=Maximum+call+stack+size+exceeded&type=Issues&utf8=%E2%9C%93）與uglify有關的「最大調用堆棧大小超過「 - 我在那裏提出了一些配置解決方法。 – async5

我發現我的問題的核心是什麼，現在我有辦法解決問題，並使我的構建過程工作。我在grunt中的構建步驟是使用grunt-contrib-requirejs，我需要覆蓋配置中的一些選項來完成這項工作。

我不希望pdf.worker模塊被包含在我的串聯和縮小的生產代碼中。
我不希望r.js縮小它，以便稍後將它從連接文件中排除。

我試圖解決第一個問題，認爲這意味着第二個問題也應該解決。當我發現兩者是分開的時，我終於找到了解決方案。

在github上的r.js example有一個名爲fileExclusionRegExp的屬性。這是我現在用來告訴r.js不要將文件複製到生成文件夾。

fileExclusionRegExp: /pdf.worker.js/

第二，我需要告訴優化器不要在連接文件中包含此模塊。這是通過覆蓋此模塊的路徑屬性值"empty:"來完成的。

paths: { 
    "pdfjs-dist/build/pdf.worker": "empty:" 
}

現在我的咕嚕生成步驟將無誤地工作，一切都很好。感謝async5通知我有關uglify和pdf.worker的錯誤。解決方法應用於另一個grunt任務，該任務將uglify工作者並單獨將其複製到構建文件夾中。選項對象爲grunt-contrib-uglify任務需要，以不破pdf.worker文件這個屬性：

compress: { 
    sequences: false 
}

現在，當生產建我的項目的偉大工程。

來源

2016-07-13 09:24:49 Tryggve

使pdf.js 1.5和require.js一起玩好

回答

相關問題