brows·er·if·y
Javascript module management for mere mortals

My Application
jQuery
underscore
Application Code Library Code

My Application
jQuery
underscore
Application Code Library Code
Linker

My Application
jQuery
underscore
Application Code Library Code
global
variables

Module management with
globals
Modules individually included on the page
Share a global namespace
Inclusion order must be manually calculated

–browserify.org
“Browserify lets you
require('modules') in the browser
by bundling up all of your
dependencies.”

Module management with
browserify
Modules are scoped in their own namespace
Uses CommonJS standard interface
Dependencies defined using require function
Modules are defined by assigning an object to
module.exports
Exactly like node.js

var $ = require(‘jquery’);
$(‘body’).html(“Browserify saves the day”);
main.js

~/$ npm install jquery --save
~/$ browserify main.js -o bundle.js
Build process

var MyModel = function() {
…
}
module.exports = MyModel;
models/MyModel.js

var $ = require(‘jquery’),
_ = require(‘underscore’),
MyModel = require(‘../models/MyModel’);
main.js

Where to from here?
Detailed documentation: http://bit.ly/1kbozFB
grunt-browserify: wrapper for integration into Grunt
build with other tools, like uglify.
exorcist: extract source maps for browsers. Very useful,
terrible name.
watchify: CLI file watcher for performing automatic
builds during development.

Any questions?