JavaScript >> Javascript 文檔 >  >> Tags >> CSS

介紹 Combiner,一個 JavaScript/CSS 連接工具

在使用 C++ 和 Java 等更“傳統”的語言進行編程時,我曾經喜歡的一件事是構建過程。我的源文件只是指出了他們需要什麼才能成功運行,其餘的由構建工具完成。這樣做的好處是,作為程序員,您可以將代碼分成邏輯合理的盡可能多的文件,而不必擔心它們最終的順序。

我喜歡 JavaScript,並嘗試將良好的編碼實踐作為我工作的一部分。當人們開始談論使用構建過程將 JavaScript 文件組合成單個可部署文件時,我感到非常興奮。我的同事 Julien Lecomte 寫了一篇出色的博文,題為“使用 Apache Ant 構建 Web 應用程序”,它展示了構建文件的過程是多麼簡單和強大。似乎大多數人現在都了解擁有良好構建過程的價值,因為大多數 JavaScript 庫都使用它。

問題

我見過的大多數構建系統都要求您在單獨的文件中指出您的依賴關係。這困擾了我很長一段時間。為什麼依賴信息應該存在於需要它的文件之外?為什麼要在系統中引入另一個文件,其唯一工作是管理依賴關係?我想要的是相當於 #include 在 C 或 import 中 在 Java 中,允許我在源文件中指定依賴項,然後根據它們的依賴項以正確的順序將所有源文件組合在一起。去年年初,我開始研究Combiner。

Combiner 做了什麼

Combiner 只做一件事:找出文件之間的依賴關係,並創建一個所有部分都按正確順序排列的文件。 JavaScript 和 CSS 的過程是相同的 文件。您可以通過以下形式包含特殊註釋來指定一個文件依賴於另一個文件:

/*requires filename.ext*/

例如:

/*requires yahoo.js*/

我選擇將註釋命名為“需要”,因為它不是靜態包含。組合器查看所有指定的文件,讀取它們的需求,然後排列所有文件,以便依賴關係總是出現在需要它們的代碼之前。每個需要的文件都需要一個“需要”註釋。

注意:您可以在註釋中使用相對或絕對路徑。例如,以下內容按預期工作:

/*requires ../yahoo.js*/

用法

我特意讓Combiner 接受與YUI Compressor 相同的格式和參數順序。這是幫助文本(可通過 -h--help 標誌):

Usage: java -jar combiner-x.y.z.jar [options] [input files]

Global Options
  -h, --help                Displays this information
  --charset <charset>       Read the input file using <charset>
  -v, --verbose             Display informational messages and warnings
  -s, --separator           Output a separator between combined files
  -e, --eliminate           Eliminates any files that aren't explicitly required.
  -o <file>                 Place the output into <file>. Defaults to stdout.

使用Combiner 組合JavaScript 和CSS 文件有兩種基本方法。第一種方法是僅指明您要構建的核心文件。例如:

java -jar combiner-0.0.1.jar -o output.js file1.js file2.js

在這種情況下,Combiner 讀取 file1.js 和 file2.js 並檢查依賴關係。如果存在依賴關係,Combiner 也會讀取這些依賴關係。最終文件 output.js 由 file1.js、file2.js 以及可能在源代碼中指定的任何依賴文件組成。這種使用方法可確保最終文件中只有必要的文件。

第二種使用組合器的方法是給它一個模式。例如,您可以將所有 JavaScript 文件包含在一個目錄中:

java -jar combiner-0.0.1.jar -o output.js *.js

當包含所有 JavaScript(或 CSS)文件時,Combiner 會讀取所有指定的文件以查找依賴項信息。即使一個或多個文件沒有依賴信息,這意味著它們不需要任何其他文件,也沒有其他文件需要它們,這些文件仍然會出現在生成的 output.js 中。如果這不是您想要的,您可以通過包含 -e 來告訴Combiner 刪除沒有依賴信息的文件 標誌:

java -jar combiner-0.0.1.jar -e -o output.js *.js

如果您有興趣了解 Combiner 發現了什麼以及它在做什麼,請添加 -v--verbose 標誌:

java -jar combiner-0.0.1.jar -v -o output.js *.js

結果輸出如下所示:

[INFO] Using charset Cp1252
[INFO] Output file is 'yuitest.js'
[INFO] Adding file 'yuitest\ArrayAssert.js'
[INFO] Adding file 'yuitest\Assert.js'
[INFO] Adding file 'yuitest\DateAssert.js'
[INFO] Adding file 'yuitest\Mock.js'
[INFO] Adding file 'yuitest\ObjectAssert.js'
[INFO] Adding file 'yuitest\TestCase.js'
[INFO] Adding file 'yuitest\TestFormat.js'
[INFO] Adding file 'yuitest\TestManager.js'
[INFO] Adding file 'yuitest\TestReporter.js'
[INFO] Adding file 'yuitest\TestRunner.js'
[INFO] Adding file 'yuitest\TestSuite.js'
[INFO] Processing file 'yuitest\ArrayAssert.js'
[INFO] ... has dependency on Assert.js
[INFO] Processing file 'yuitest\Assert.js'
[INFO] ... no dependencies found.
[INFO] Processing file 'yuitest\DateAssert.js'
[INFO] ... has dependency on Assert.js
[INFO] Processing file 'yuitest\Mock.js'
[INFO] ... has dependency on Assert.js
[INFO] Processing file 'yuitest\ObjectAssert.js'
[INFO] ... has dependency on Assert.js
[INFO] Processing file 'yuitest\TestCase.js'
[INFO] ... has dependency on Assert.js
[INFO] Processing file 'yuitest\TestFormat.js'
[INFO] ... no dependencies found.
[INFO] Processing file 'yuitest\TestManager.js'
[INFO] ... no dependencies found.
[INFO] Processing file 'yuitest\TestReporter.js'
[INFO] ... no dependencies found.
[INFO] Processing file 'yuitest\TestRunner.js'
[INFO] ... has dependency on TestCase.js
[INFO] ... has dependency on TestSuite.js
[INFO] ... has dependency on Assert.js
[INFO] Processing file 'yuitest\TestSuite.js'
[INFO] ... has dependency on TestCase.js
[INFO] Verifying dependencies of 'yuitest\TestReporter.js'
[INFO] Verifying dependencies of 'yuitest\ObjectAssert.js'
[INFO] Verifying dependencies of 'yuitest\TestFormat.js'
[INFO] Verifying dependencies of 'yuitest\TestRunner.js'
[INFO] Verifying dependencies of 'yuitest\Assert.js'
[INFO] Verifying dependencies of 'yuitest\DateAssert.js'
[INFO] Verifying dependencies of 'yuitest\TestCase.js'
[INFO] Verifying dependencies of 'yuitest\ArrayAssert.js'
[INFO] Verifying dependencies of 'yuitest\TestSuite.js'
[INFO] Verifying dependencies of 'yuitest\TestManager.js'
[INFO] Verifying dependencies of 'yuitest\Mock.js'
[INFO] Adding 'yuitest\Assert.js' to output.
[INFO] Adding 'yuitest\ObjectAssert.js' to output.
[INFO] Adding 'yuitest\TestCase.js' to output.
[INFO] Adding 'yuitest\TestSuite.js' to output.
[INFO] Adding 'yuitest\DateAssert.js' to output.
[INFO] Adding 'yuitest\ArrayAssert.js' to output.
[INFO] Adding 'yuitest\Mock.js' to output.
[INFO] Adding 'yuitest\TestRunner.js' to output.

如果您認為您的文件以錯誤的順序輸出,以詳細模式運行可以幫助識別問題。文件順序不正確的最常見原因是依賴信息丟失或不正確。

錯誤檢查

我試圖找出過程中可能發生錯誤的所有區域並給出適當的錯誤消息。每次運行Combiner時都會檢查以下錯誤情況:

  • 驗證所有指定的文件是否存在。
  • 驗證所有依賴文件是否存在。
  • 驗證文件之間不存在循環引用。

我希望過程中發生的任何錯誤都以明顯且不混淆的方式指示。我知道當錯誤發生時,我已經花費了無數小時試圖破譯某些工具的輸出,我希望Combiner 能幫助大家擺脫這種痛苦。

什麼不是組合器

組合器不是前端構建系統。那裡已經有很多好的構建系統,我不想添加到那個列表中。 Combiner 的工作就是將 JavaScript 和 CSS 文件以一種讓您不必擔心源文件排序的方式組合起來。您可以將其用作構建過程的一部分,就像您將 YUI Compressor 用作構建過程的一部分一樣。

Combiner 既不是 Sprockets 的模仿者,也不是它的替代品。 Sprockets 是一個更完整的前端開發構建系統,包括 JavaScript 依賴管理以及其他資產(如 CSS 和圖像)的打包。 Combiner 嚴格用於 JavaScript 和 CSS 依賴管理,可以插入到任何構建系統中。

什麼花了這麼長時間?

我最初編寫Combiner 是為了我預定在聖何塞的Rich Web Experience 上進行的一次演講。演講概述了使用 Combiner、YUI Compressor 等創建前端構建系統。不幸的是,會議被取消了,我參與了一些佔用我大部分時間的其他項目(包括一本新書)。這個週末,在嘗試開發另一個工具時,我偶然發現了舊的源文件,並決定完成我已經開始的工作。

下載

Combiner 是用 Java 編寫的,以 jar 文件的形式分發,可以在這裡下載:combiner-0.0.1.jar。組合器目前是免費軟件。如果有足夠的興趣,我會清理代碼並開源它,所以請隨時與我聯繫反饋。

更新(2009 年 10 月 18 日): 在 BSD 許可下發布的組合器。源代碼可在 GitHub 獲得。


Tutorial JavaScript 教程
  1. Twitter Bootstrap 選項卡:在頁面重新加載或超鏈接時轉到特定選項卡

  2. React Context API 簡單設置

  3. 一步一步開發 MERN 應用程序的指南。第1部分

  4. 文檔的 Firestore 數據聚合

  5. 介紹檢查 html 鏈接 - 不再有壞鏈接

  6. 使用 SQLite 和 Node.js 理解類型

  7. Node.js 項目:您的項目有什麼目錄結構?

  1. 如何在 Web 項目中查找未使用/死代碼(90% 的代碼在 javascript 中)

  2. 使用 Simplr 路由器

  3. 可選手工鏈🤓

  4. 如何使您的 NodeJS 應用程序安全?

  5. 如何在 Homebrew 上發布你的 NodeJS 應用程序

  6. Cypress 和 Angular 的代碼覆蓋率

  7. 如何循環遍歷 JavaScript 對像數組?

  1. 什麼是 API,真的嗎?應用程序接口的難以捉摸的意義

  2. 網絡容錯

  3. 帶參數的回調函數 JavaScript |示例代碼

  4. GraphQL API 工具和查詢