how to use node.js module system on the clientside

SubStack on github has a module called node-browserify.

It will compress and bundle your modules and deliver it as a single js file, but you use it just like Node.js (example from module readme):

<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>

From the module description:

Browserify

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

Browserify bundles everything ahead-of-time at the mount point you specify. None of this ajaxy module loading business.

More features:

  • recursively bundle dependencies of npm modules
  • uses es5-shim for browsers that suck
  • filters for {min,ugl}ification
  • coffee script works too!

Browserify magically lets you do that.