2015 年 11 月 9 日，星期一

NPM 和 Bower

套件和相依性管理是許多 Web 應用程式的重要考量，特別是當它們的複雜性不斷增加並且需要許多第三方函式庫時。隨著 DataTables 1.10.10 的發佈，以及其配套擴充套件的最新修訂版，DataTables 現在完全將套件管理納入專案的核心部分。

DataTables、其擴充套件和樣式選項現在具有明確定義的 CommonJS 和 AMD 載入器，使其可以在 NPM 和 Bower 上發佈 - 搜尋 datatables.net。這也開啟了使用其他工具的選項，例如 Browserify 和 WebJars。

歷史

首先，給任何正在思考的人一個簡短的提醒 - 「但我已經將 CommonJS / AMD 載入器與 DataTables 一起使用」：DataTables 及其擴充套件在過去三年中已經具有 CommonJS 和 AMD 載入器。此版本僅更新了使用的實作方式，使其在 DataTables 及其所有擴充套件之間保持一致，並且首次將樣式框架（Bootstrap、Foundation、jQuery UI 和 DataTables 自己的樣式）也包含在內。

發佈套件

DataTables 及其擴充套件可在 GitHub 上取得，每個擴充套件都有自己的儲存庫。這些儲存庫包含原始碼（例如，SCSS、需要組裝的 Javascript 等），但不包含已編譯的檔案（例如，沒有原始 CSS 或縮小的 Javascript）。它們還包含 DataTables 支援的樣式庫的樣式資訊 - 目前為 Bootstrap、Foundation、jQuery UI 及其自己的基本樣式。

這些儲存庫中的資訊並不能直接輕鬆地包含在專案中：您需要設定自己的編譯工具鏈，並且僅包含所需檔案，忽略您不需要的樣式選項。

為了解決這個問題，我們建立了新的發佈套件，其中包含已編譯的檔案以及該特定套件所需的檔案。每個核心函式庫（DataTables、AutoFill、Buttons 等）都有自己的發佈套件，以及每個樣式選項的套件。以 DataTables 和 AutoFill 為例，我們提供以下套件：

DataTables 核心 - NPM: datatables.net | 儲存庫
- DataTables 預設樣式 - NPM: datatables.net-dt | 儲存庫
- DataTables Bootstrap 樣式 - NPM: datatables.net-bs | 儲存庫
- DataTables Foundation 樣式 - NPM: datatables.net-zf | 儲存庫
- DataTables jQuery UI 樣式 - NPM: datatables.net-jqui | 儲存庫
AutoFill 核心 - NPM: datatables.net | 儲存庫
- AutoFill 預設樣式 - NPM: datatables.net-autofill-dt | 儲存庫
- AutoFill Bootstrap 樣式 - NPM: datatables.net-autofill-bs | 儲存庫
- AutoFill Foundation 樣式 - NPM: datatables.net-autofill-zf | 儲存庫
- AutoFill jQuery UI 樣式 - NPM: datatables.net-autofill-jqui | 儲存庫
等等，其他擴充套件也是如此！

結果是您必須包含函式庫套件和樣式套件。

套件名稱一律以 datatables.net 開頭。樣式套件名稱一律附加

-dt - DataTables 自己的預設樣式
-bs - Bootstrap
-zf - Foundation
-jqui - jQuery UI

樣式套件已正確設定其相依性以包含核心函式庫，因此您只需要安裝所需的樣式套件，套件管理器就會為您完成其餘工作。

Require

CommonJS 和 AMD 都定義了自己的 require() 函式，用於包含函式庫。以下簡要概述如何將它們與 DataTables 發佈套件一起使用。

CommonJS

使用 CommonJS 時，DataTables 套件都會匯出一個工廠函式，可以使用兩個選擇性引數執行

要使用的 window 物件（這是必要的，因為無標頭 CommonJS 環境中的 jQuery 可能需要附加文件的 window）。如果沒有給定參數，或者參數為虛值，則將使用 window。
DataTables 應附加到的 jQuery 物件。如果沒有給定參數，套件將執行自己的 require('jquery') 來包含 jQuery。

例如 - 沒有引數

var $       = require( 'jquery' );
var dt      = require( 'datatables.net-dt' )();
var buttons = require( 'datatables.net-buttons-dt' )();

並提供 window 和 jQuery 引數

var $       = require( 'jquery' );
var dt      = require( 'datatables.net-dt' )( window, $ );
var buttons = require( 'datatables.net-buttons-dt' )( window, $ );

如上所述，樣式函式庫將自動解析其自己的核心函式庫相依性 - 例如，在上面的範例中，會自動解析 datatables.net 和 datatables.net-buttons 套件。

NPM 上提供的套件完整列表和安裝說明，請參閱DataTables NPM 下載頁面。

AMD

DataTables 使用的 AMD 載入器將匯出模組描述的函式庫。例如，DataTables 核心檔案 (datatables.net) 將匯出 $.fn.dataTable，而 Buttons (datatables.net-buttons) 將匯出 $.fn.dataTable.Buttons。樣式套件將匯出其主機函式庫。

例如，我們可能有

require.config( {
    paths: {
        'datatables.net': 'https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min',
        'datatables.net-buttons': 'https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min'
    }
} );

require( ['jquery', 'datatables.net', 'datatables.net-buttons'], function ($, dt, buttons) {
    $('#myTable').DataTable();
} );

此範例僅示範了使用 RequireJS 載入 DataTables 的 Javascript 部分。顯然，您也可能希望為表格設定樣式 - RequireJS 不支援 CSS 載入。雖然有一些外掛程式可用，但對於 Javascript 和樣式組合，您可能會發現使用 CommonJS 結合 Browserify 或DataTables 下載建構器更容易。

串連您的檔案

雖然 HTTP/2 將解決載入多個檔案時的延遲問題，但在新協定被廣泛採用之前，請記住串連您的檔案！這在 AMD 環境（例如 RequireJS）中尤其重要，因為從伺服器請求的每個個別檔案都可能導致嚴重的效能問題。

DataTables 下載建構器可用於建立包含所需軟體的單一檔案。

盡情享受吧！

在 DataTables 專案中新增套件管理器支援，完成了一系列旨在讓 DataTables 的入門和開發更容易的工作。下載建構器開啟了這個開端，新的 CommonJS 和 AMD 支援提供了與許多套件管理器的相容性。

如果您對此工作有任何意見反應，請隨時在論壇中開啟新主題。