Browserify allows JavaScript code to be bundled into a single file so that modules and dependencies can be required in the browser like in Node.js. It uses CommonJS modules and requires dependencies to be defined with the require function. When bundled, all dependencies are included in the file and modules are scoped within their own namespace. This avoids issues with global namespace pollution and manually calculating inclusion order that come with directly including modules on a page.

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

2. My Application
jQuery
underscore
Application Code Library Code

3. My Application
jQuery
underscore
Application Code Library Code
Linker

4. My Application
jQuery
underscore
Application Code Library Code
global
variables

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

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

7. 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

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

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

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

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

12. 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.

13. Any questions?