Browser-side require() for your node modules and npm packages
Browserify bundles all of your javascript when your server fires up at the mount point you specify.
More features:
-
recursively bundle dependencies of npm modules
-
uses es5-shim and crockford's json2.js for browsers that suck
-
filters for {min,ugl}ification
-
coffee script works too!
-
bundle browser source components of modules specially with the "browserify" package.json field
server.js
var connect = require('connect');
var server = connect.createServer();
server.use(connect.static(__dirname));
server.use(require('browserify')({
base : __dirname + '/js',
mount : '/browserify.js',
filter : require('jsmin').jsmin,
}));
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>
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...');
<html>
<head>
<script type="text/javascript" src="/browserify.js?traverse"></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>
var browserify = require('browserify');
Return a middleware that will host up a browserified script at opts.mount
or
"/browserify.js"
if unspecified. All other options are passed to
browserify.bundle(opts)
to generate the source.
Return a string with the bundled source code given the options in opts
:
Recursively bundle all .js
and .coffee
files.
Base can be a directory, an Array of directories, or an object that
maps names to directories such that require('name/submodule')
works.
If there is a package.json at the base
directory it will be read
according to the package.json
procedure below.
Preface the files in base
with this name.
Map require(name)
for the name
field to this file.
Whether to include es5-shim for legacy javascript engines.
True if unspecified.
Bundle all of these module names and their dependencies.
If the name has a slash in it, only that file will be included, otherwise all .js and .coffee files which are not in the test directory and are not binaries will be bundled into the final output.
Append this file to the end of the bundle in order to execute code 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.
During bundling the package.json of a module or base directory will be read for
its name
and main
fields, which will be used unless those fields are defined
in opts
.
If the package.json has a "browserify" field, its contents will take precedence over the standard package.json contents. This special field is meant for packages that have a special browser-side component like dnode and socket.io. If a main is specified in a "browserify" hash and no "base" is given, only that "main" file will be bundled.
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
You can require('events').EventEmitters
just like in node.js code.
The posix functions from the path
module have been included except for
exists()
and existsSync()
. Just require('path')
!
The faux directory name, scrubbed of true directory information so as not to expose your filesystem organization.
The faux file path, scrubbed of true path information so as not to expose your filesystem organization.
npm install jquery-browserify
to have npm and browserify handle your jquery deployment!