pr4rbq
Last Updated: February 25, 2016
·
3.858K
· smallhadroncollider
Fb0153b7c04243e7fe2d1ec64f5daa91

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
Say Thanks
Respond

5 Responses
Add your response

10208
602452 559499297898 738290963 n

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 ·
10209
Fb0153b7c04243e7fe2d1ec64f5daa91

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 ·
10282
8595c2591b0bca22e736813af33fa7c3

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 ·
10291
Fb0153b7c04243e7fe2d1ec64f5daa91

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 ·
13456
16d4be686da36a34b427924e844ff5f7

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 ·