RequireJS: Automatically load configuration script after a library module has been loaded

问题

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.

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.

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:

I would rather have a single config file for each lib so I don't have to mess around in a potentially huge main script to change settings
The main script always loads every lib to initialize its settings even though some of the libs may not be used on the current page

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.

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).

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?

回答1:

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

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'
        },
    }
};

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;
    }
);

As odd as the mapping

'datatables': 'datatables'

may look, it's working like a charm!

来源：https://stackoverflow.com/questions/26505925/requirejs-automatically-load-configuration-script-after-a-library-module-has-be

标签

javascript

requirejs

config