RequireJS: how do I handle different module dependencies for code shared between the browser and server?

Question

RequireJS: how do I handle different module dependencies for code shared between the browser and server?

I have a requireJS module loaded on both the browser and the server, to implement some shared functionality.

The module however has different dependencies in each environment:

In node, it needs the fs module in order to be able to load files
In the browser it needs JQuery AJAX or some other AJAX library to be able to fetch those files as HTTP resources.

What's the best way to be able to handle modules that are shared between the browser and server, but which have different dependencies in each?

javascript
node.js
browser
requirejs

Answer 1

The dependencies don't need to be different. Instead, make your module have neither module as a dependency. Rather, you need to parametrize the module for the two different cases, and pass the correct parameter from server and browser specific code to handle those cases. One way would be to require a particular property to be set on the module before any methods are called, and for this property to be for an object that provides the necessary file loading functionality:

mymodule.fileLoader = fswrapper;

or

mymodule.fileLoader = ajaxWrapper;

(obviously, the above two fragments will appear in server and browser specific code respectively). Another alternative would be to pass the relevant object to the constructor of the class exported from the module (if that's how your module is exposed) or assign it as a property of the created object. E.g.

var v = new MyClass(fswrapper);
//or
var v = new MyClass();
v.fileLoader = ajaxWrapper;

There are lots of variations on these ideas, but the point is that you should abstract the file system difference away from the shared module, and instead pass it an object that handles the access for the environment in question.