Require.js 2.0 Shim Configuration

Require.js 2.0 was recently released by James Burke, and with it comes a bunch of bug fixes and enhancements. The major enhancement that I wanted to shed light on includes the new Shim configuration.

The Shim configuration is a much needed upgrade to the Require.js core that allows Require.js to load non-AMD compatible scripts. In my previous post Using Backbone.js with Require.js, I covered how Use.js, a Require.js plugin created by Backbone.js core contributor Tim Branyen, was necessary to load Backbone.js and Underscore.js (both AMD incompatible) with Require.js. This was a good solution for integrating these two wonderful projects together, but it was still another project dependency that you needed to keep track of.

James Burke mentions Use.js as one of his inspirations for including the new Shim configuration. Now, instead of including the Use.js plugin to load Backbone and Underscore, you can have a shim configuration in your main file like this:

  // Sets the configuration for your third party scripts that are not AMD compatible
  shim: {

      "backbone": {
          deps: ["underscore", "jquery"],
          exports: "Backbone"  //attaches "Backbone" to the window object
      }

  } // end Shim Configuration

The Shim configuration is also a replacement for the order plugin, which made sure certain scripts executed in a particular order. Example use cases for this include loading jQuery and Backbone plugins, since Backbone must be executed before Backbone plugins are executed, and jQuery must be executed before jQuery plugins are executed. Below is how you can load jQuery and Backbone plugins using Require.js 2.0 or greater:

  // Sets the configuration for your third party scripts that are not AMD compatible
  shim: {

        'jquery.selectBoxIt': ['jquery'],
        'backbone.Validation': ['backbone']

  } // end Shim Configuration