Brian Love
Google Developer Expert in Angular, software engineer and skier located 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
      deps: ['jquery']
    bootstrap: '//'

The CoffeeScript above is compiled into the following JavaScript:

    shim: {
        bootstrap: {
            deps: [ "jquery" ]
    paths: {
        bootstrap: "//"

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).