Bootstrap via RequireJS

I have been learning and using RequireJS for the past couple of weeks, and I have to say, I love it. Here are some of the benefits of using RequireJS for a web application:

• Only load the JavaScript code/modules you need.
• Each JavaScript module defines it’s own dependencies.
• Load your JavaScript via XHR without rolling your own JavaScript loader.
• Still works well with libraries that do not support AMD (Asynchronous Module Definition).

I want to quickly show how to load libraries, such as Bootstrap, that do not support AMD.

Loading Bootstrap via RequireJS

To load a library, such as Bootstrap, that does not support AMD we need to configure RequireJS to use a shim, and to specify the dependencies for the library. In this case we are loading the Bootstrap JavaScript library, which depends on the JQuery library.

Here is how I added the shim property in CoffeeScript.

##
# Configure require.js
##
require.config
  shim:
    bootstrap:
      deps: ['jquery']
  paths:
    bootstrap: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min'

The CoffeeScript above is compiled into the following JavaScript:

require.config({
  shim: {
    bootstrap: {
      deps: ['jquery'],
    },
  },
  paths: {
    bootstrap: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
  },
});

In the code above we are setting the shim property for the RequireJS configuration to load the bootstrap library after the jquery dependency has been loaded. I have also included a custom path for the bootstrap library to load it from the CDN.