Brian F Love
Learn from a Google Developer Expert focused on Angular, Web Technologies, and Node.js from Portland, OR.
Learn Angular the right way with Ultimate Courses

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
      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 F 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 Portland and I ski (a lot).