How do I configure library plugins with Require.js?

Question

I have a jQuery / Require.js / Backbone project that loads the jQuery Datatables library along with several of its plugins. The configuration below works fine, but it just seems kinda gross.

Is there any more elegant way to load all those Datatables dependent plugins?

It would be cool if there were an inverse of the "deps" shim property that would load child plugins once a given library was loaded.

Also, in the config below I'm loading all the external dependencies into the App scope because they are literally used by every single Backbone view in my app and I don't want to have to define/include them in every module.

Is it stupid to load all external libraries in the App scope rather than including them in every View?

I would greatly appreciate any best practice kind of guidance here. I've read a lot of related threads on this site and haven't been able to find much in the way of examples where people are loading a lot of dependencies like this.

require.config({
    baseUrl: 'js/com/mycompany/',
    paths: {
        jquery: '/js/lib/jquery',
        underscore: '/js/lib/underscore/underscore',
        backbone: '/js/lib/backbone/backbone',
        text: '/js/lib/require/text',

        jqueryui: '/js/lib/ui/jquery-ui-1.10.0.custom.min',
        json: '/js/lib/json/jquery.json-2.3.min',
        datatables: '/js/lib/datatables/js/jquery.dataTables.min',
        datatablesSelectable: '/js/lib/datatables/js/datatables.Selectable',
        datatablesToggle: '/js/lib/datatables/js/jquery.groupToggle',
        datatablesResize: '/js/lib/datatables/js/ColReorderWithResize',
        datatablesTableTools: '/js/lib/datatables/tabletools/js/TableTools.min',
        toaster: '/js/lib/toaster/javascript/jquery.toastmessage',
        cookie: '/js/lib/cookie/jquery.cookie',
        validation: '/js/lib/validation/jquery.validate',
        validationAdditional: '/js/lib/validation/additional-methods',
        alerts: '/js/lib/alerts/jquery.alerts',
        loadmask: '/js/lib/loadmask/jquery.loadmask.min',
        qtip: '/js/lib/qtip/jquery.qtip.min',
        dropdown: '/js/lib/dropdown/jquery.dropdown',

        extensions: '/js/com/mycompany/common/extensions',
        app: 'app'
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        jqueryui: { deps: ["jquery"] },

        datatables: { deps: ["jquery"] },
        datatablesSelectable: { deps: ["datatables"] },
        datatablesToggle: { deps: ["datatables"] },
        datatablesResize: { deps: ["datatables"] },
        datatablesTableTools: { deps: ["datatables"] },

        toaster: { deps: ["jquery"] },
        cookie: { deps: ["jquery"] },
        validation: { deps: ["jquery"] },
        validationAdditional: { deps: ["validation"] },
        alerts: { deps: ["jquery"] },
        loadmask: { deps: ["jquery"] },
        qtip: { deps: ["jquery"] },
        dropdown: { deps: ["jquery"] },
        json: { deps: ["jquery"] },

        extensions: { deps: ["jquery", "datatables"] }
    }
});

require([

    'app',
    'extensions',

    'backbone',
    'jqueryui',
    'datatables',
    'datatablesSelectable',
    'datatablesToggle',
    'datatablesResize',
    'datatablesTableTools',
    'toaster',
    'validation',
    'validationAdditional',
    'alerts',
    'loadmask',
    'qtip',
    'json'

], function(
    App,
    extensions,

    // including all these here because they are used by literally
    // every view in the app. seems kinda gross
    Backbone,
    jqueryui,
    datatables,
    datatablesSelectable,
    datatablesToggle,
    datatablesResize,
    datatablesTableTools,
    toaster,
    validation,
    validationAdditional,
    alerts,
    loadmask,
    qtip,
    json

    ){

    App.initialize();

});

The paths config may look a little strange because I have a base app in the root "/" context of the webserver (where all common external Javascript libs are located). This app exists in a subcontext (e.g. "/myapp") with its own local js directory of custom scripting.

Thanks for any input!

ddotsenko ddotsenko · Accepted Answer · 2013-02-13T05:31:35

Since all of the plugins are "plain JS" files anyway, why don't you just concatenate + minify all the plugins into one file? Call it "myjqplugins.js" and have just one entry in paths and one entry in shims

Or, at least concat them into cohesive groups: validation + validationAdditional Toaster + qtip + others Datatables*** as one file.

^ 3 paths entries + 3 shims entries.

How do I configure library plugins with Require.js?

1 Answers