Loading Backbone and Underscore Using Requirejs

Loading Backbone and Underscore using RequireJS

RequireJS 2.X now organically addresses non-AMD modules such as Backbone & Underscore much better, using the new shim configuration.

The shim configuration is simple to use: (1) one states the dependencies (deps), if any, (which may be from the paths configuration, or may be valid paths themselves). (2) (optionally) specify the global variable name from the file you're shimming, which should be exported to your module functions that require it. (If you don't specify the exports, then you'll need to just use the global, as nothing will get passed into your require/define functions.)

Here is a simple example usage of shim to load Backbone. It also adds an export for underscore, even though it doesn't have any dependencies.

require.config({
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {   // or, you could use these deps in a separate module using define

});

^{Note: this simplified code assumes that jquery, backbone and underscore are in files named "jquery.js", "backbone.js" and "underscore.js" in the same directory as this "main" code (which becomes the baseURL for require). If this isn't the case, you'll need to use a paths config.}

I personally think with the built-in shim functionality, the advantages of not using a forked version of Backbone & Underscore outweigh the benefits of using the AMD fork recommended in the other popular answer, but either way works.

Dependencies in RequireJS with Backbone, Underscore, and jQuery in 2014

You have require right after requirejs config setup

require(['jquery', 'jquery-ui', 'underscore', 'backbone', 'backbone.localStorage'], function() {

});

They loaded in the correct order by a chance, to control that sequence you need to define dependencies of each module in a shim

RequireJS - How to configure Underscore before it's loaded by Backbone?

I think your first example was on the right track. The following seems to work:

main.js

requirejs.config({
    paths: {
        'underscore': 'underscoreConfig',
        'originalUnderscore': 'underscore'
    },
    shim: {
        'originalUnderscore': {
            exports: '_'
        }
    }
});

underscoreConfig.js

define(['originalUnderscore'], function(_) {
    _.templateSettings =
    {
        evaluate    : /<%([\s\S]+?)%>/g,
        interpolate : /<%cleanHtml([\s\S]+?)%>/g,
        escape      : /<%[=-]([\s\S]+?)%>/g
    };
    return _;
});

Trouble combining Require.js and Backbone.js/Underscore.js

This finally worked.

require.config({
    paths:{
        jquery:'jquery/jquery-min',
        underscore:'underscore/underscore-min',
        backbone:'backbone/backbone-min'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        waitSeconds: 15
    }
});

require(['day_view'], function (day_view) {
    function start() {
        day_view.show();
    }
    console.log(day_view); // Empty object here?
    return {
        start:start
    };
});

and

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { ...

Loading jQuery, Underscore and Backbone using RequireJS 2.0.1 and shim

You only need to use "shim" config if the library does not already call define() to declare a module. jQuery does this already, so you can remove that from the shim config. The above code will work as is, but the exports shim config for jQuery will be ignored since jQuery will call define() before the shim work is done.

The downsides with the shim vs having the script call define() to define a module:

1. It is less portable/reliable: every developer needs to do the shim config, and keep track of library changes. If the library author does it inline in the library, everyone gets the benefits more efficiently. The code templates at umdjs/umd can help with that code change.

2. Less optimal code loading: shim config works by loading shim deps before loading the actual library. So it is a bit more sequential loading than parallel. It is faster if all scripts can be loaded in parallel, which is possible when define() is used. If you do a build/optimization for final deployment and combine all the scripts into one script, then this is not really a downside.

loading backbone plugins with requirejs

Add DeepModel to your scope in function signature:

define([
'jquery',
'underscore',
'backbone',
'deepModel',
], function($, _, Backbone, **DeepModel**) 

jQuery and Underscore not loading in RequireJS

When requiring any file via require.js, it must conform to the standard AMD definition in order for the IIFE to have an argument defined.

For example, in the jQuery library, they have added an export definition:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  define( "jquery", [], function () { return jQuery; } );
}

Which allows you to reference $ in the IIFE.

Shimming adds an export definition (similar to what jQuery has above), so if you wanted to you could have _, $ and Backbone point to the appropriate references... but personally, instead of relying on the arguments, I just rely on the evaluation globally, setup necessary shims for dependencies and otherwise, for all my own modules (where I do define each file as an AMD module), I use the inline require definition.

For example:

require(['jquery','underscore','backbone', 'my-module'],function(){
    var MyModule = require('my-module');
});

Hopefully the above made sense.

~ Based on your code above, try:

require(['jquery', 'underscore', 'backbone', 'app'],
    function () {  
        var App = require('app');
        //App.initialize();
        console.log($);
        console.log(_);
        console.log(Backbone);
});

using require and backbone to load templates via html file and not script tag

At the moment you actually have a problem with your config. Backbone is not an AMD module, so you have to use the shim option of requirejs. Well, the example speaks for itself as it's about Backbone.

---

Related Topics