Question

I am looking into a way to write by BackboneJS application using a CommonJS structure which allows Javascript modules to be required. This application could then work on the client or server side with node.

I have looked into requirejs and other similar options but you have to write the app in a specific way which in my opinion looks really naff.

I have also looked at browserify and webmake which takes your code and any modules that are required and combines them into a single js file with the missing (require) methods. All a clever idea, but leaves the code on the client side a bit messy.

Is there such a thing out there which can take by code written in its commonJS format, compile all the required modules that are compatible with the browser and spit out a Javascript file (or several) that can be used in the browser without having to worry about missing require methods? Even better would be a solution tailored to backbone applications.

Answer 1

You have a number of options for using CommonJS structured modules in the browser:

1. RequireJS 2.0.2 supports the configuration option cjsTranslate. Setting this to cjsTranslate: true in your r.js optimizer configuration will wrap any included modules that appear to be in the CommonJS format with the define boilerplate. See details here.
2. Cajon is new a module loader built on top of RequireJS that supports modules in the CommonJS format (also written by the RequireJS author @jrburke).
3. The Volo dependency management tool (again by @jrburke) has the ability to include and translate cjs modules into amd modules. This is probably not a great option for you but worth including for completeness.
4. You could write a server component that automatically wraps your code in the AMD define boilerplate. I believe this is the approach they’re taking at SoundCloud – see this blog post.

Edit Aug 29, 2014: The current best practice here is arguably Browserify with generated source maps for easier client-side debugging.