How to require CommonJS modules in the browser?

Question

What is the best way to load CommonJS modules as client-side javascript in the browser?

CommonJS modules put their functionality in the module.exports namespace and are usually included using require(pathToModule) in a server-side script. Loading them on the client cannot work the same way (require needs to be replaced, asynchronousness needs to be taken into account etc.)

I have found module loaders and other solutions: Browserify, RequireJS, yabble, etc. or ways to simply alter the modules. What do you consider the best way and why?

Answer 1

Webmake is one of the options. I use it to pack application that is build from over 200 modules of over 20 packages. It works.

If you want to see some example, check: SoundCloud Playlist Manager, it's strictly client-side and built with Webmake

Answer 2

I have used requirejs extensively in the past (implementation on BBC iPlayer in 2010) and it works well. It can handle CommonJS modules, but it needs an additional wrapper, which I find annoying. If you want to use those modules in node.js as well, you need to use requirejs on the server side as well, which I don't like doing since it is not idiomatic node.js JavaScript.

I have used webmake and browserify in the past year on a few projects. Initially, the compilation step put me off, but having used it extensively this year, I can say that this is not an issue.

Browserify has a watch function included, which works very well. Webmake can be hooked up to a watcher (such as watchr) or, you can use the webmake-middleware module, which can be used as part of an express or connect app. This has the advantage that rather than compiling the JavaScript on each save, it is only compiled when you actually request it. Connect makes it trivial to create a server (also static), so you could create a tiny static node.js server to serve up your files if you want to develop your frontend without a backend.

Bonus: no need for a build script as you always deal with the built code.

Answer 3

Here is a comprehensive list of your current options ordered by their respective popularity (number of watchers) on GitHub:

Options for use of require() in the browser (Wayback Machine archive)

Answer 4

CommonJS Compiler https://github.com/dsheiko/cjsc Why? It works fine with nodejs (CommonJs) modules /treat module exactly as nodejs/ and with UMD, brings minimum extra code to the compiled JavaScript, allows exporting globals of 3rd party libraries without touching their code, source maps and a trick that other cannot do:

var str = require( "lorem-ipsum.txt" );
console.log( str );

Output:

 Lorem ipsum dolor 
 sit amet, consectetur 
 adipiscing elit. Morbi...

Here the slides https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler

Answer 5

What about Browserify? Its description is: "Browser-side require() for your node modules and npm packages" which sounds what you need.

Answer 6

Can't say I've tried the others you've listed here but I like RequireJS because:

• It works in a similar way to CommonJS
• It's easy to use
• It implements some of the upcoming new standards
• You can use it in NodeJS so that you can use the same files in server and client
• It includes a minifier/packer for deploying to producion
• It has plugins. The Text plugin, that lets you load HTML files, is very useful for large apps.