brows·er·if·yJavascript 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?