testling - automated browser tests
browserling - interactive browser testing
commit b78e8d161e995d67433f094915ce750251a546a5
Author: James Halliday
Date: Tue Mar 29 00:03:52 2011 +0000

NOTE This article is positively ANCIENT. Much has changed since this article was written:

  • middleware is gone. Use modules like encilada or browservefy instead.
  • es5 shims were completely removed
  • filters have been replaced with transforms
  • built-in support for coffee script is gone. Use a transform such as coffeeify instead.

You're probably better off not even reading this article and consulting the current readme and/or browserify.org instead.


Announcing browserify, a node.js module that bundles up all your javascript into a single file so you can use node.js-style require() from the browser.

Check this:

server.js

var connect = require('connect'); var server = connect.createServer(); server.use(connect.static(__dirname)); server.use(require('browserify')(__dirname + '/js')); server.listen(9797);

js/foo.js

var bar = require('./bar'); module.exports = function (x) { return x * bar.coeff(x); };

js/bar.js

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

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 id="result"></span> </body> </html>

Then fire up the server (node server.js) and load up http://localhost:9797/

Amazing! Browserify just hosted all of those files at /browserify.js and made require() work just like in node.js!

But wait! There's more! You can specify npm modules to use and then you can require() those too! Just pass the "require" parameter to browserify:

server.js

var connect = require('connect'); var server = connect.createServer(); server.use(connect.static(__dirname)); server.use(require('browserify')({ require : [ 'traverse' ] })); server.listen(9797);

Then spew out some HTML:

index.html

<html> <head> <script type="text/javascript" src="/browserify.js"></script> <script type="text/javascript"> var Traverse = require('traverse'); window.onload = function () { var obj = { a : 1, b : [ 2, 3, 4 ], c : [ { d : 5, e : 6 } ] }; var leaves = Traverse(obj).reduce(function (acc, x) { if (this.isLeaf) acc.push(x); return acc; }, []) ; document.getElementById('result').innerHTML = leaves.join(', '); }; </script> </head> <body> <span id="result"></span> </body> </html>

Then fire up the server and check http://localhost:9797/

Success! It pulled out the leaves from that pesky nested data structure using traverse! If the npm modules have dependencies, those dependencies will get bundled along recursively!

Plus, browserify looks for the "browserify" field in package.json files up on npm, so you can serve up custom browser versions of packages. Here's the "browserify" part of dnode's package.json:

    "browserify" : {
        "name" : "dnode",
        "main" : "./browser/index.js",
        "base" : "./browser",
        "require" : [ "dnode-protocol" ]
    },

With this field in the package.json and "dnode" in the "require" list, require('dnode') serves up the browser-side dnode code!

Here are some packages that have been tested with browserify:

And that's not all!

  • Browserify bundles with es5-shim by default so you can use shiny new javascript features like Function.prototype.bind() even if your browser doesn't have those yet!
  • You can specify post-filters on the bundled source to run your code through javascript minifiers!
  • If you have .coffee files in your base directory they are parsed automatically so you can require() them too!!
  • Browserify comes with compatability wrappers so you can require('events').EventEmitters, require('path'), and process.nextTick() just like in node.js, to name a few!

What an amazing amount of features! Check it out on github!

Want to make sure your browserified code runs on all the browsers? Check out my startup, browserling! Cross-browser testing from your browser!

more
git clone http://substack.net/blog.git