RequireJS：加载库模块后自动加载配置脚本 [英] RequireJS: Automatically load configuration script after a library module has been loaded

问题描述

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

I am refactoring the JavaScripts of our project to use RequireJS for on-demand loading of required modules instead of adding a bunch of script tags to the HTML template.

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

We use a few libraries like jQuery, DataTables plugin for jQuery etc. and some of those libs need some initialization after they have been loaded. I. e. the default settings for DataTables must be set after the lib has been loaded and before it is being used the first time.

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

At the moment I do this in a main script which is being loaded right after RequireJS. This main module requires all libraries that need initialization, like DataTables, and sets the default settings

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

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

This approach is quite annoying for two reasons:

1. 我希望每个库都有一个配置文件，所以我不必在一个可能巨大的主脚本中随意更改设置


2. 即使某些脚本可能不在当前页面上使用，主脚本也会始终加载每个lib来初始化其设置。

为此，我正在寻找某种加载后依赖项或回调，该依赖项或回调将在加载库后自动加载或执行。

To improve this, I am looking for some kind of "after-load" dependency or callback, which is automatically loaded or executed when the library has been loaded.

我考虑过使用这些库的shim config的init回调，但是由于我的库不会污染全局名称空间，并且只有依赖项被传递给init函数，因此我没有机会访问init内已加载的模块（据我

I thought about using the init callback of the shim config for those libraries, but since my libraries don't pollute the global namespace and only the dependencies are being passed to the init function, I have no chance to access the loaded module inside init (as far as I could see).

然后我想到了修改RequireJS的地图配置来映射i。 e。 DataTables到包装脚本，该脚本需要需要实际的DataTables库，然后再设置配置选项。

Then I thought about tinkering with the map configuration of RequireJS to map i. e. DataTables to a wrapper script which requires the actual DataTables lib and sets configuration options afterwards.

是否有更简单的方式来加载配置？

Is there a more straightforward way to load the configs?

推荐答案

只是想让您知道我的最终解决方案。我屈服于使用包装脚本和地图配置。

Just wanted to let you know my final solution. I gave in to using a wrapper script and the map configuration.

RequireJs配置的相关部分：

The relevant parts of the RequireJs configuration:

// 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 ）

My wrapper script looks like the following (file "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' 

可能看起来像这样魅力！

may look, it's working like a charm!

这篇关于RequireJS：加载库模块后自动加载配置脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！