BackboneJS + Requirejs: Backbone is null issue

Question

In the router.js. The firebug console alerts Backbone is null there. Why???

app.js

define([
  'order!jQuery',
  'order!Underscore',
  'order!Backbone',
  'order!router'  // Request router.js
],
function($, _, Backbone, Router){

    App = {
        initialize: function() {

            console.log("app.js initalize");
            Router.initialize();
        }
    };

    return App;
});

router.js

define([
   'order!Underscore',
   'order!Backbone'
],
function(_, Backbone){

    var AppRouter = Backbone.Router.extend({      
        // Console shows Backbone is null here, why? 
        // I'm sure the config is correct.
        routes: {

            '*actions': "defaultAction"
        },

        defaultAction: function(actions){
            // We have no matching route, lets just log what the URL was
            console.log('No route:', actions);
        }
    });

    var initialize = function(){
        console.log("Router initialize");
        var app_router = new AppRouter;

        Backbone.history.start();
    };
    return {
        initialize: initialize
    };

});

Answer 1

Backbone does not support the AMD and it doesn't register as module. When required it registers normally as a global Backbone object, also since 1.3 Underscore doesn't support AMD neither and if you will require Backbone and Underscore under Backbone and _ namespaces they will overwrite its values in this modules scope to undefined cause of that.

jQuery supports AMD but it also registers itself as a global instance. Basically it means that you don't need to require jquery, underscore and backbone multiple times - it's enough if you do it once in your requirejs main script

Answer 2

The alternative is to hack the backbone.js library.

Note: This will allow you to reference Backbone.js and underscore.js library within your require.js defines, but it will not stop them from being added to the global namespace/window object. This requires a little more hacking.

1. Find:

   (function(){var l=this,y=
   

2. Replace it with:

   define('backbone',['underscore','jquery'],function(_,$){
   var l = this;
   (function(){var y=
   

3. Add this to the bottom of the page:

   return l.Backbone;
   });
   

Then do the same for underscore.js

1. Prefix the beginning with:

   define('underscore',function(){
   

2. Add to the bottom of the page:

   return this._;
   });