Browserify is a tool for Node.js that enables developers to use the require() function from Node in the browser. It bundles up all of your JavaScript files and dependencies into a single file that can be served to the browser. It allows for modular code in the client-side environment by leveraging the CommonJS module pattern.

What are browserify's main functionalities?

Bundle modules for the browser

This feature allows you to bundle all your JavaScript files and dependencies into a single file. The code sample demonstrates how to create a bundle starting with 'main.js' and output it to 'bundle.js'.

const browserify = require('browserify');
const fs = require('fs');

let b = browserify();
b.add('main.js');
b.bundle().pipe(fs.createWriteStream('bundle.js'));

Transformations

Browserify can apply transformations to the files as they are added to the bundle. This is useful for tasks like compiling ES6 syntax to ES5 using Babel, as shown in the code sample.

const browserify = require('browserify');
const babelify = require('babelify');

browserify('./src/app.js')
  .transform(babelify, { presets: ['@babel/preset-env'] })
  .bundle()
  .pipe(process.stdout);

Plugins

Browserify can be extended with plugins that can add additional functionality. In the code sample, the watchify plugin is used to automatically re-bundle the file whenever changes are detected.

const browserify = require('browserify');
const watchify = require('watchify');

const b = browserify('./src/app.js', { plugin: [watchify] });
b.on('update', bundle);
function bundle() {
  b.bundle().pipe(fs.createWriteStream('bundle.js'));
}

Other packages similar to browserify

Browserify

Browser-side require() for your node modules and npm packages

Just point a javascript file or two at browserify and it will walk the AST to read all your require()s recursively. The resulting bundle has everything you need, including pulling in libraries you might have installed using npm!

browserify!

Relative require()s work browser-side just as they do in node.
Coffee script gets automatically compiled and you can register custom compilers of your own!
Browser-versions of certain core node modules such as path, events, and vm are included as necessary automatically.

examples

simple example

server.js

var connect = require('connect');
var server = connect.createServer();

server.use(connect.static(__dirname));
server.use(require('browserify')({
    require : __dirname + '/js/foo.js',
    mount : '/browserify.js'
}));

server.listen(9797);
console.log('Listening on 9797...');

js/foo.js

var bar = require('./bar');
var baz = require('./baz');

module.exports = function (x) {
    return x * bar.coeff(x) + baz.wowsy(x);
};

js/bar.js

exports.coeff = function (x) {
    return Math.log(x) / Math.log(2) + 1;
};

js/baz.coffee

exports.wowsy = (beans) ->
    beans * 3 - 2

index.html

<html>
<head>
    <script type="text/javascript" src="/browserify.js"></script>
    <script type="text/javascript">
        var foo = require('./foo');
        
        window.onload = function () {
            document.getElementById('result').innerHTML = foo(100);
        };
    </script>
</head>
<body>
    foo =
    <span style='font-family: monospace' id="result"></span>
</body>
</html>

npm example

server.js

var connect = require('connect');
var server = connect.createServer();

server.use(connect.static(__dirname));
server.use(require('browserify')({
    mount : '/browserify.js',
    require : 'traverse',
}));

server.listen(4040);
console.log('Listening on 4040...');

index.html

<html>
<head>
    <script type="text/javascript" src="/browserify.js"></script>
    <script type="text/javascript">
        var Traverse = require('traverse');
        var obj = [ 5, 6, -3, [ 7, 8, -2, 1 ], { f : 10, g : -13 } ];
        Traverse(obj).forEach(function (x) {
            if (x < 0) this.update(x + 128);
        });
        
        window.onload = function () {
            document.getElementById('result').innerHTML
                = JSON.stringify(obj);
        };
    </script>
</head>
<body>
    foo =
    <span style='font-family: monospace' id="result"></span>
</body>
</html>

methods

var browserify = require('browserify');

var b = browserify(opts={})

Return a middleware with attached methods that will host up a browserified script at opts.mount or "/browserify.js" if unspecified.

opts may also contain these fields:

require - calls b.require()
ignore - calls b.ignore()
entry - calls b.addEntry()
filter - registers a "post" extension using b.use()
watch - set watches on files, see below

If opts is a string, it is interpreted as a require value.

watch :: Boolean or Object

Set watches on files and automatically rebundle when a file changes.

This option defaults to false. If opts.watch is set to true, default watch arguments are assumed or you can pass in an object to pass along as the second parameter to fs.watchFile().

b.bundle()

Return the bundled source as a string.

b.require(file)

Require a file or files for inclusion in the bundle.

If file is an array, require each element in it.

If file is a non-array object, map an alias to a package name. For instance to be able to map require('jquery') to the jquery-browserify package, you can do:

b.require({ jquery : 'jquery-browserify' })

and the same thing in middleware-form:

browserify({ require : { jquery : 'jquery-browserify' } })

To mix alias objects with regular requires you could do:

browserify({ require : [ 'seq', { jquery : 'jquery-browserify' }, 'traverse' ])

In practice you won't need to b.require() very many files since all the require()s are read from each file that you require and automatically included.

b.ignore(file)

Omit a file or files from being included by the AST walk to hunt down require() statements.

b.addEntry(file)

Append a file to the end of the bundle and execute it without having to require() it.

Specifying an entry point will let you require() other modules without having to load the entry point in a <script> tag yourself.

If entry is an Array, concatenate these files together and append to the end of the bundle.

b.filter

b.use(ext, fn)

Wrap every file matching the extension ext with the function fn.

For every file included into the bundle fn gets called for matching file types as fn.call(b, body, file) for the bundle instance b and the file content string body. fn should return the new wrapped contents.

If ext is unspecified, execute the wrapper for every file.

If ext is 'post', execute the wrapper on the entire bundle.

If ext is an object, pull the extension from ext.extension and the wrapper function fn from ext.wrapper. This makes it easy to write plugins like fileify.

Coffee script support is just implemented internally as a .use() extension:

b.use('.coffee', function (body) {
    return coffee.compile(body);
});

b.prepend(content)

Prepend unwrapped content to the beginning of the bundle.

b.append(content)

Append unwrapped content to the end of the bundle.

b.alias(to, from)

Alias a package name from another package name.

package.json

In order to resolve main files for projects, the package.json "main" field is read.

If a package.json has a "browserify" field, you can override the standard "main" behavior with something special just for browsers.

The "browserify" field can be a string that points to the browser-specific "main" file or it can be an object with a "main" field in it.

compatability

process

Browserify exports a faux process object with these attributes:

nextTick(fn) - does setTimeout(fn, 0)
title - set to 'browser' for browser code, 'node' in regular node code

require('events')

You can require('events').EventEmitter just like in node.js code.

require('vm')

All the goodness of node's require('vm') has been emulated with iframe trickery and eval() hacks.

require('path')

The posix functions from the path module have been included except for exists() and existsSync(). Just require('path')!

__dirname

The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.

__filename

The faux file path, scrubbed of true path information so as not to expose your filesystem organization.

protips

npm install jquery-browserify to have npm and browserify handle your jquery deployment!

browserify: browser-side require() for your node.js

Keywords

FAQs

What is browserify?

Is browserify popular?

Is browserify well maintained?

Package last updated on 22 Jun 2011

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

browserify

What is browserify?

What are browserify's main functionalities?

Other packages similar to browserify

Browserify

examples

simple example

npm example

methods

var b = browserify(opts={})

watch :: Boolean or Object

b.bundle()

b.require(file)

b.ignore(file)

b.addEntry(file)

b.use(ext, fn)

b.prepend(content)

b.append(content)

b.alias(to, from)

package.json

compatability

process

require('events')

require('vm')

require('path')

__dirname

__filename

protips

read more

Keywords

Related posts

browserify

What is browserify?

What are browserify's main functionalities?

Other packages similar to browserify

webpack

parcel

rollup

Browserify

examples

simple example

npm example

methods

var b = browserify(opts={})

watch :: Boolean or Object

b.bundle()

b.require(file)

b.ignore(file)

b.addEntry(file)

b.use(ext, fn)

b.prepend(content)

b.append(content)

b.alias(to, from)

package.json

compatability

process

require('events')

require('vm')

require('path')

__dirname

__filename

protips

read more

Keywords

Related posts

Introducing the Socket Python SDK

The Wildcard Gamble: Understanding the Risks of Floating Dependency Ranges in npm

New Rust RFC Proposes Adding Support for Trusted Publishing to Crates.io