83

What is the best way to load CommonJS modules as client-side JavaScript code 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?

3
  • you can try github.com/component/component May 10, 2013 at 3:27
  • 1
    @JonathanOng As of 2015, component is deprecated.
    – mgthomas99
    Feb 1, 2018 at 16:50
  • 3
    As of 2018, some answers are dated, and webpack isn't mentinoed. Webpack would be another solution. Based on reading the different solutions webpack is becoming more and more used/recommended. It's a PITA to learn but very powerful and as of Webpack V4 with a good architecture for solving the transpiling/packaging problem.
    – PatS
    May 29, 2018 at 21:35

6 Answers 6

51

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

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.js or connect application. 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: There isn't any need for a build script as you always deal with the built code.

0
22

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)

3
  • 1
    If you are managing the above, please consider adding urequire.org to the tool list. Jun 30, 2013 at 21:58
  • Page cannot be found Apr 18, 2015 at 11:40
  • 4
    link-only answers are not permitted because they might, uhm... break in the future (really??). Please put the relevant information in your answer. Aug 18, 2015 at 20:51
13

Use Browserify.

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

2
2

The CommonJS compiler.

Why? It works fine with Node.js (CommonJS) modules /treat module exactly as Node.js and, with UMD, brings minimum extra code to the compiled JavaScript, allows exporting global variables of third-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 are the slides: https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler

2
0

Webmake is one of the options. I use it to pack an 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.

-2

I 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 Node.js so that you can use the same files in server and client
  • It includes a minifier/packer for deploying to production
  • It has plugins. The Text plugin, that lets you load HTML files, is very useful for large applications.
7
  • 7
    After having used RequireJS for a while I'm planning on switching to Browserify. RequireJS is still good but I got to the point where I needed to start really sharing certain modules between Node and the browser and it's easier to do by writing proper CommonJS modules.
    – evilcelery
    May 2, 2012 at 21:30
  • 1
    CommonJS and requireJS are two different module systems. Is there any way to make them compatible, or automatically convert from one format to the other? Jan 4, 2013 at 1:28
  • 1
    RequireJs is only one module system, of a specific module format (AMD). The only tool that really bridges the module system incompatibilities (commonjs/AMD) is github.com/anodynos/urequire. It converts to UMD that runs everywhere. (note: I am its author) Jun 30, 2013 at 22:07
  • 9
    This doesn't answer the question.
    – Indolering
    Feb 16, 2014 at 1:20
  • 1
    what you can do, is write commonjs modules, and then have development server and build script wrap these modules in AMD definitions – so that the source code is CJS, but when requested in browser it works as AMD Mar 23, 2014 at 19:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.