How to require CommonJS modules in a browser?

Question

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

CommonJS modules put their functionality in the module.exports namespace and are usually module.exports using require(pathToModule) on the server side of the script. Downloading them to the client cannot work the same (replacement is required, asynchrony, etc. must be taken into account)

I found module loaders and other solutions: Browserify, RequireJS, yabble, etc. or ways to easily change modules. What do you think is the best way and why?

Answer 1

I have used requirejs in the past (implementation on BBC iPlayer in 2010) and it works well. It can handle CommonJS modules, but this requires an extra shell, which I find annoying. If you want to use these modules in node.js, you also need to use requirejs on the server side, which I don’t like to do, since it is not idiomatic node.js JavaScript.

I used webmake and browserify last year on several projects. Initially, the compilation stage let me go, but, using it widely this year, I can say that this is not a problem.

Browserify has a clock function that works very well. Webmake can be connected to an observer (for example, watchr ), or you can use webmake-middleware , which can be used as part of an Express or Connect application. This has the advantage that instead of compiling JavaScript for each save, it only compiles when you really request it. Connect makes creating a server (also static) trivial, so you can create a tiny static node.js server to serve your files if you want to develop your interface without support.

Bonus: There is no need to create a script, since you are always dealing with inline code.

Answer 2

Below is a complete list of your current options, sorted by their popularity (number of watchers) on GitHub:

Options for using require () in a browser (Wayback Machine file archive)

Answer 3

What about browserify ? Its description is “Browser side require () for your node modules and npm packages”, which sounds the way you need it.

Answer 4

CommonJS Compiler https://github.com/dsheiko/cjsc Why? It works fine with nodejs (CommonJs) modules / treat just like nodejs / and with UMD, brings minimal additional code to compiled JavaScript, allows you to export global libraries of third-party libraries without touching their code, source maps and tricks that others can not 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

Answer 5

Webmake is one option. I use it to package applications that are built from more than 200 modules from more than 20 packages. He works.

If you want to see an example, check out: SoundCloud Playlist Manager , it is strictly client-side and built using Webmake

Answer 6

I can’t say that I tried the others that you specified here, but I like RequireJS because:

• It works similarly to CommonJS
• Easy to use
• It implements some of the new standards.
• You can use it in NodeJS so that you can use the same files on the server and client.
• It includes a minifier / packer for deployment in production
• It has plugins. A text plugin that allows you to upload HTML files is very useful for large applications.