2015 年 11 月 9 日，星期一

NPM 和 Bower

软件包和依赖性管理是许多 Web 应用程序中的一个重要方面，特别是随着其复杂性的不断增长，需要许多第三方库。随着 DataTables 1.10.10 版及其配套扩展的最新修订版发布，DataTables 现在将软件包管理完全视为该项目的一个核心部分。

DataTables、其扩展和样式选项现在具有明确的 CommonJS 和 AMD 加载器，以便在 NPM 和 Bower 上发布这些选项 - 搜索 datatables.net。这还提供了使用其他工具的选项，例如 Browserify 和 WebJars。

历史记录

首先，对任何有以下想法的人快速说明一下 - “但我已经对 DataTables 使用了 CommonJS / AMD 加载器”：在过去三年里，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 包都导出了一个工厂函数，该函数可以使用两个可选参数执行

要使用的窗口对象（在不带界面的 CommonJS 环境中，需要将 jQuery 作为窗口对象，并附加一个文档）。如果没有给出参数，或其值为假，则使用 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 支持，提供了与许多包管理器的兼容性。

如果你对这项工作有任何反馈，请随时在论坛中开辟一个新主题。