Loading Backbone and Underscore using RequireJS

by

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.

More Related Contents:

  1. Underscore template throwing variable not defined error
  2. Explanation of …
  3. External template in Underscore
  4. How to load bootstrapped models in Backbone.js while using AMD (require.js)
  5. How to use if statements in underscore.js templates?
  6. correctly implement backbone comparators
  7. What is the difference between these Backbone/Underscore .bind() methods?
  8. Find by key deep in a nested array
  9. What does `void 0` mean? [duplicate]
  10. Backbone: Why assign `$(‘#footer’)` to `el`? [duplicate]
  11. Getting Chrome to prompt to save password when using AJAX to login
  12. Backbone.js : repopulate or recreate the view?
  13. What is two way binding?
  14. Ways to save Backbone.js model data?
  15. How can I mock dependencies for unit testing in RequireJS?
  16. Requirejs why and when to use shim config
  17. RequireJS: How to define modules that contain a single “class”?
  18. How to handle initializing and rendering subviews in Backbone.js?
  19. What is ‘define’ used for in JavaScript (aside from the obvious)?
  20. Group by multiple values Underscore.JS but keep the keys and values
  21. Backbone.View “el” confusion
  22. Backbone.js – data not being populated in collection even though fetch is successful
  23. Reverse sort order with Backbone.js
  24. Array Of JS Dates How To Group By Days
  25. merge two arrays of keys and values to an object using underscore
  26. Computed properties in Backbone
  27. Tell screen reader that page has changed in Backbone/Angular single-page app
  28. How to capture the key event from a view?
  29. How to import a js library without definition file in typescript file
  30. Node JS fs module inside browser

Leave a Comment