Modularizing JavaScript with Browserify

What is browserify?

If you have ever written any custom Node.js modules, getting started with Browserify will be a walk in the park. Browserify enables us to write Node.js style modular code and declaring dependencies is even simpler than you think if you have used require.js in the past. Configuring require.js is a world of hell and their documentation doesn’t help in any way. This is when browserify turns out to be such a relief. Take a look at the following code. module-alerter.js:

module.exports = function alerter(message) {
window.message(message);
}

Now, if we were to import this in main.js, we’d write the following. main.js:

var alerter = require(‘./modules/module-alerter’);
document.addEventListener(‘DOMContentLoaded’, function(){
  alerter(‘This is awesome’);
}, false);

I am sold already. Aren’t you?

Install browserify

You need Node.js installed and NPM comes with Node.js.

npm install -g browserify

Now, let’s set jQuery as our dependency library in our module-alerter.js

var $ = require('jquery');
// Note that we don’t need to specify relative path for our jquery library
// jQuery 2.0+ is AMD compatible and it returns jQuery or $

module.exports = function alerter(message) {
window.message(message);
$(‘body’).css(‘color’, ‘red’);
}

Please, use the appropriate directory structure for your modules, libraries. I usually adhere to the following

/modules

– This is where you will put all your custom modules

/vendor

– This is where you will put all your libraries such as jQuery, Backbone, underscore

/assets/js/

– This is where browserify will bundle up all your modules along with vendor libraries in 1 neat and tidy file. (Notice we don’t have anything there yet? We will get to that part)

browserify Magic

It is time to let browserify wave it magic wand over our code and get us to work. Just run the following command by reaching your project directory. In my case, I should be in the directory node (Don’t worry. This is a non-node project. I named it node because I am in love with node.js)

$ browserify src/js/main.js -o assets/js/bundle.js

// Please do not prefix $ to the command

Now, switch to the browser and reload or whatever to see the result. Boom! Now, wasn’t that easy? Your

assets/js/

directory should now look like this

assets/js/bundle.js

bundle.js

is that neat and tidy file I mentioned earlier. You don’t have to worry about what’s in there. Include this

bundle.js

in your HTML code right before the body ends. Like this

 script src="assets/js/bundle.js" 

There’s one problem, though. You might wonder, “Do I have to run this command every time I add new module/vendor library or re-arrange my modules in project structure?” NO. What you need is something that will keep a track of changes happening in your project. Something that will over watch your beautiful modular code. Fortunately, there’s a Node package that can do that for us. Introducing watchify

Install watchify

npm install -g watchify

and change your previous command from

$ browserify src/js/main.js -o assets/js/bundle.js

to

$ watchify src/js/main.js -o assets/js/bundle.js

I hope that was quick enough and believe me we just took a crack at browserify. There is a ton of things we can do with it. The best place to read up more on Browserify would be the handbook.