Last Updated: February 25, 2016
·
5.11K
· smallhadroncollider

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

5 Responses
Add your response

So does this use a non-AMD version of lodash? I've tried dropping in the AMD version with little success (because Backbone tries to require('underscore') if it doesn't find a _ global)

over 1 year ago ·

This is using the non-AMD version of Backbone and LoDash. I prefer to use the official non-AMD version of Backbone.

over 1 year ago ·

Using the shim like this totally works, but I had better luck using the AMD-enabled fork of Backbone: https://github.com/amdjs/backbone

This allows you to skip the shim stuff entirely and load Backbone just like a normal AMD module.

Lest you be concerned, @jrburke has been totally on the ball and consistently releasing the AMD fork shortly after each non-AMD Backbone release.

over 1 year ago ·

It's good to know that the AMD versions are kept up to date - that has always been my concern with using them.

Do Backbone plugins generally work well with the AMD versions?

over 1 year ago ·

It seems that from version 1.1.2, Backbone now supports the AMD registration itself:

https://github.com/amdjs/backbone/issues/10

Apparently, Underscore also supports AMD registration itself.
So it seems that @jrburke has stopped releasing versions for the backbone-amd and underscore-amd forks.
@victorquinn, now, you can load the original version of Backbone as an AMD module, still without needing the shim stuff.

I don't know the impact on using it with Lodash though.

over 1 year ago ·