Brian Love
Angular + TypeScript Developer in Denver, CO

Bootstrap via RequireJS

Reading time ~1 minute

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.

Brian Love

Hi, I'm Brian. I am interested in TypeScript, Angular and Node.js. I'm married to my best friend Bonnie, I live in Denver and I ski (a lot).