如何使用 Google 的 Closure Compiler 將我的 javascript 拆分為模塊？

Question

我想在我們使用的 javascript 源代碼上使用 google 閉包編譯器。 在開發模式中，我們傾向於將功能分解為大量文件，但在生產中希望將它們組合成模塊。

在調用編譯器時，我可以給它一個要包含的文件列表以供編譯，但是輸出顯示編譯器沒有保存文件列表的順序。

我搜索了一下，發現可以使用goog.provide/good.require來控制不同js文件之間的依賴關系。 問題在於它向我的 js 添加了我不需要或不想要的代碼，例如：

goog.provide("mainFile")

將添加這個：

var mainFile = {};

到編譯后的 js 文件，這是我不想要的。 我們根本沒有使用 google 閉包庫，我只想使用編譯器。

有沒有辦法告訴編譯器文件的順序而不包含更多我不需要的“閉包庫”功能？ 我當然可以創建一個我自己的工具，它會首先獲取所有文件，將它們組合成一個，然后作為編譯器的輸入，但如果編譯器本身可以完成，我寧願將其設為無效。

---

編輯

目標是能夠生成類似於此線程中的答案的模塊： Using the --module option in Closure Compiler to create multiple output files

所以我想增加控制哪些文件進入哪個模塊的能力，同時還可以控制它們的順序。 目前我不使用通配符，但我計划在將來這樣做（如果可能的話）。

簡單地“cat file1.js file2.js > combine.js && compile...” 沒問題，但在我們的例子中它有點復雜，我們必須編寫一個基於某些邏輯來執行此操作的程序/腳本。 如果我們能以某種方式提前告訴編譯器文件的順序，它可能只會節省實現這樣一個程序的時間。

謝謝。

Answer 1

Closure-compiler 創建多個輸出文件的能力提供了一個強大的工具來將輸入文件分成不同的輸出塊。 它的設計使得可以根據所需的功能在不同的時間加載不同的塊。 有多個與塊有關的編譯器標志。

--chunk 標志的每次使用都描述了一個輸出文件及其依賴項。 每個塊標志遵循以下語法：

--js inputfile.js
--chunk name:num_files:dependency

生成的輸出文件將是 name.js 並包含由前面的 --js 標志指定的文件。

依賴選項是你最感興趣的。它指定父塊是什么。 塊選項必須描述一個有效的依賴樹（你必須有一個基本塊）。

下面是一個例子：

--js commonfunctions.js
--chunk common:1
--js page1functions.js
--js page1events.js
--chunk page1:2:common
--js page2function.js
--chunk page2:1:common
--js page1addons.js
--chunk page1addons:1:page1

在這種情況下，您告訴編譯器 page1 和 page2 塊依賴於公共塊，而 page1addons 塊依賴於 page1 塊。

請記住，如果編譯器確定它僅由該塊使用，則它可以並且確實將代碼從一個塊移動到其他塊輸出文件中。

這些都不需要閉包庫或使用 goog.require/provide 調用，也不需要向輸出添加任何代碼。 如果您希望編譯器自動確定依賴項或能夠為您管理這些依賴項，您需要使用模塊格式，例如 CommonJS、ES2015 模塊或 goog.require/provide/module 調用。

更新說明：在 20180610 版本之前， chunk標志被命名為module 。 它們被重命名以減少與適當的 JS 模塊的混淆。 答案已更新以反映新名稱。

更新說明 2：他們現在是一個實用程序，可以為您自動計算和生成這些標志： https : //github.com/ChadKillingsworth/closure-calculate-chunks

Answer 2

您還可以設置輸出路徑，例如：

--module_output_path_prefix ./public/js/

另請參閱： 使用 Closure Compiler 中的 --module 選項創建多個輸出文件