Why Browserify?

There's been some hype around browserify lately, and it has been especially noticeable while I've been gulping around. So what is browserify and why would you use it?

Browserify gives you the ability to 'require' packages from node package manager (npm) and your own javascript files in your client side code, like so:

First install browserify globally and the packages you want to use with npm.

npm install -g browserify
npm install underscore

Then in your main javascript file (app.js here), use require.

var _ = require('underscore');
var MyObj = require('./MyObj.js');
_.each(MyObj(), callback);

Lastly run the following command in your console.

browserify app.js > production.js

Browserify will then grab all the files listed called with require, including any dependencies they might have, and concatenate them into one javascript file for distribution.

On face value that doesn't seem that revolutionary. But it actually is.

Using npm's require statement for development is awesome, it lets us easily bring in and manage necessary dependencies, handling all the file linking and concatenating. No more downloading dependencies from various websites, placing them into a local dev folder, and manually linking them into your html via script tags.

This is very useful to me for larger projects that have many dependencies, as the require statement allows you to easily separate and modularize each part of your program. When it comes time to concatenate your client files for production, browserify will not double up on required dependencies. Meaning if you require jquery in two different files within the same project, it will only add one copy of it to the final production version.

Browserify attracted my attention with its potential to quicken my workflow, as