Loading Bootstrap with RequireJS

On November 23, 2012, in Javascript, by Anuj Gakhar

After having heard lots of good things about RequireJS in the past few months, I recently started playing around with RequireJS which is a JavaScript file and module loader, which improves the speed and quality of your code. After reading about it a little bit, the biggest advantage of using RequireJS, that I can see, is it’s dependency management. This is actually a very common scenario in day to day web/app development. A script needs another script to be loaded first for it’s code to function and then there can be nested dependencies as well. RequireJS handles all of that very well.

One of the first things I tried to do was to load Twitter Bootstrap’s JS files using RequireJS. Once RequireJS is loaded on the page :-

[js]<script data-main="/assets/main" src="/assets/lib/require.js"></script>[/js]

The above code tells RequireJS to load main.js in the/assets/ folder which has all the initialisation and dependency code. Assuming a folder structure like below :-

The code for main.js looks like this :-

[js highlight=”8″]requirejs.config({
baseUrl: ‘/assets’,
paths: {
jquery: [‘//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min’,’lib/jquery/jquery-1.8.2.min’],
bootstrap: ‘bootstrap/js/bootstrap.min’
},
shim: {
‘bootstrap’:{deps: [‘jquery’]}
}
});

requirejs([
‘jquery’,
‘bootstrap’
], function($, _bootstrap){
// this is where all the site code should begin
return {};
});[/js]

There are a few things worth noting in the above code. First of all, in the RequireJS config, we are defining a baseUrl which is the path where RequireJS will look for all the JS files. Then we are pre-defining some paths. e.g. we are loading jQuery via the Google CDN URL first, failing which we are telling it to load it from the “lib/jquery folder” folder. The other important thing to note is the use of “shim” – where we are telling RequireJS that Bootstrap has a dependency on jQuery so it must load jQuery first. Shim is used to configure the dependencies and exports for older, traditional “browser globals” scripts that do not use define() to declare the dependencies and set a module value.

You can read more about all the config options here and you can read more about the shim config options here. Once both jQuery and Bootstrap have loaded, then you can start writing whatever code you like in your callback function.

I quite like this way of defining dependencies and it certainly improves your code quality and code management. Ofcourse, there is a lot more to it than just loading files, I am getting used to writing JS code as modules so they can be loaded individually on demand as well. But more on that later!

P.S. I am pretty new to RequireJS as it has literally been a couple of days I started playing around with it, so the above may not be the best/only way to do this, but feel free to point that out.

Tagged with:  

5 Responses to Loading Bootstrap with RequireJS

  1. tapsboy says:

    This was useful. After further investigation, it seems if we use require-jquery (concatenated version, the bootstrap shim can be avoided.

  2. Andy says:

    where is the css?

  3. atefth says:

    Check this out, It’s the same thing, but in more detail.

Leave a Reply to atefth Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: