Some prior words on browserify debug mode

First of all, remember that browserify will, by default function in debug mode.

That is why the first time you try browserify you’ll see a lot of gibberish characters appended to the browserified file.

Every scenario described here, has its own way of disabling the debugging (i.e. disabling source maps).

Browserify as a command line tool

This is the regular usage promoted by everyone. You write a CommonJS file and then ask Browserify (installed as a command line tool) to bundle it.

npm install -g browserify
touch index.js
echo "console.log('Hello world')" > index.js
browserify index.js > bundle.js

I won’t get into much detail here because this is the most common usage for browserify.

The next scenarios I describe here are not optimal because these are heavy in terms of parsing and compiling but there are handy in several situations.

Browserify as an express middleware

Maybe you want to have your browser code source files somewhere and make them available to the browser on an express route browserifying them on the fly, instead of having to process them via the commmand line.

You can use the browserify-middleware module for helping you achieve that.

This examples I put down here are the ones in the README.md for browserify-middleware but I explain two of the examples in little more detail.

Serving a single file browserified on-the-fly at a specific path

var browserify = require('browserify-middleware');
var express = require('express');
var app = express();

//provide a browserified file at a path
app.get('/js/file.js', browserify('./client/file.js'));

app.listen(3000);

The ./client/file.js file path are relative to __dirname of caller, not relative to process.cwd().

Serving multiple files browserified on-the-fly under a common base path

Let’s say you want to offer several browserified files under /js/*

var browserify = require('browserify-middleware');
var express = require('express');
var app = express();

//provide browserified versions of all the files in a directory
app.use('/js', browserify('./client/dir'));

app.listen(3000);

Browserify will try to load whatever /js/foo.js file you ask via HTTP, find it in the client/dir directory and browserify it according to its own require() statements. Then, the browserified version will be served by express individually at each path.

The ./client/dir path is relative to __dirname of caller, not relative to process.cwd().

You can check the full API for browserify-middleware in order to improve your usage.

As a module. A.k.a. API usage.

This scenario allows you to create a Buffer, an stream or a String containing the browserified code instead of serving it via HTTP or relying on a UNIX command line for piping the output of browserify as a command line tool.

Getting a stream for piping it

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle().pipe(process.stdout);

Getting a buffer from the browserify API

If you pass a function to browserify’s bundle() method, it won’t return an stream. Instead, it will call that function with an error-first argument and the browserified code as second argument if nothing bad happened when browserifying.

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle(function(err, code) {
  // Here `code` is a Buffer.
});

Getting a string from the browserify API

This is the same as getting a buffer, but calling the .toString() method on the Buffer.

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle(function(err, code) {
  console.log(code.toString());
});

The full API for this kind of usage is documented here.