RequireJS：加载库模块后自动加载配置脚本答案

【问题标题】：RequireJS: Automatically load configuration script after a library module has been loadedRequireJS：加载库模块后自动加载配置脚本
【发布时间】：2014-10-22 10:59:03
【问题描述】：

我正在重构我们项目的 JavaScript 以使用 RequireJS 来按需加载所需的模块，而不是在 HTML 模板中添加一堆脚本标签。

我们使用了一些库，如 jQuery、用于 jQuery 的 DataTables 插件等，其中一些库在加载后需要进行一些初始化。 IE。 DataTables 的默认设置必须在加载 lib 之后和第一次使用之前进行设置。

目前我在 RequireJS 之后加载的主脚本中执行此操作。这个主模块requires所有需要初始化的库，比如DataTables，并设置默认设置

require(["jquery", "datatables"], function($) {
    // Set datatables default values
    $.extend(
        $.fn.dataTable.defaults,
        {
            jQueryUI: true,
            lengthMenu: [5, 10, 25, 50],
            paginationType: "full_numbers",
            pageLength: 5
        }
    );
});

这种方法很烦人，原因有两个：

我宁愿每个库都有一个配置文件，这样我就不必在一个可能很大的主脚本中搞乱来更改设置
主脚本始终加载每个库以初始化其设置，即使当前页面上可能未使用某些库

为了改进这一点，我正在寻找某种“加载后”依赖或回调，它会在加载库时自动加载或执行。

我考虑过为这些库使用 shim 配置的 init 回调，但由于我的库不会污染全局命名空间并且只有依赖项被传递给 init 函数，所以我没有机会访问加载的模块在 init 内部（据我所知）。

然后我考虑修改 RequireJS 的 map 配置来映射 i。 e. DataTables 到一个包装脚本，requires 实际的 DataTables 库并在之后设置配置选项。

有没有更直接的方式来加载配置？

【问题讨论】：

是的，不能为此使用垫片。如果你的模块是一个真正的模块（调用define 来定义它自己），那么你不能在它上面使用垫片。 map 是您最好的选择。这是我想到的第一件事。
这也是我阅读手册后的想法……但我仍然希望一些 RequireJS 专家能知道更清晰的解决方案。
对于通用解决方案，使用map 是我能想到的最清晰、最安全的解决方案。我还可以想到解决方案，其中涉及将您正在使用的库“构建”到包含配置的新文件中，但这很糟糕（并且可能导致其他问题）并且（在我看来）它比使用 map 更晦涩难懂。
Use require.js to run common code before module is required的可能重复

标签： javascript requirejs config

【解决方案1】：

只是想让你知道我的最终解决方案。我放弃了使用包装脚本和地图配置。

RequireJs配置的相关部分：

// Configure the RequireJS library
var require = {
    baseUrl: "js/modules",
    paths: {
        "jquery":     "../lib/jquery/dist/jquery",
        "datatables": "../lib/DataTables/media/js/jquery.dataTables",
    },
    map: {
        // Map the 'datatables' library to its wrapper module 
        // for every other module that 'require's this library
        '*': {
            'datatables': 'application/datatables.wrapper'
        },
        // only the wrapper script is supposed to get the actual 
        // 'datatables' library when 'require'ing 'datatables'
        'application/datatables.wrapper': {
            'datatables': 'datatables'
        },
    }
};

我的包装脚本如下所示（文件“js/modules/application/datatables.wrapper.js”）

define(
    // require jQuery, DataTables, and the DataTables configuration object
    // which resides in another file
    ["jquery", "datatables", "application/config/datatables.config"], 
    function($, dataTable, config) {
        // Set datatables default values
        $.extend(
            dataTable.defaults,
            config
        );

        return dataTable;
    }
);

和映射一样奇怪

'datatables': 'datatables'

可能看起来，它就像一个魅力！

【讨论】：