Using Backbone with RequireJS

It's common to see define(['underscore', 'backbone', ... at the beginning of every module definition when people are using Backbone with RequireJS. While technically correct, it is unnecessary and can easily lead to bugs (where the required files are forgotten or the arguments are missing/in the wrong order).

Because the official non-AMD versions of jQuery, Underscore*, and Backbone register themselves globally, it is not necessary to require them more than once. Using the shim configuration option of RequireJS we can easily set them up so that we only have to declare them once:

require.config({
    paths: {
        jquery: '../vendor/jquery/jquery', // jQuery
        lodash: '../vendor/lodash/dist/lodash', // Underscore stand-in (non AMD version)
        backbone: '../vendor/backbone/backbone', // Backbone (non AMD version)
    },
    shim: {
        // Libraries
        jquery: {
            exports: '$'
        },
        lodash: {
            exports: '_',
        },
        backbone: {
            exports: 'Backbone',
            deps: ['jquery', 'lodash']
        }

        /*
         * Our app requires Backbone
         * (which in turn requires LoDash and jQuery)
         */
        app: {
            deps: ['backbone']
        }
    }
});

/* 
 * Now require the app code, which, because of the `shim`
 * settings, will only load once jQuery, LoDash, and Backbone
 * are added to the global scope
 */
require(['app']);

You will no longer need to define jQuery, Underscore, or Backbone in every module as the app will not load until they are ready.

Notes

• I use generally use LoDash in place of Underscore