Javascript Modules

11 Oct 2014. comments

Up until now we’ve had a lot of different module systems for javascript:

Back in the old days of javascript we didn’t even have those and handled modules in this way:

var mymodule = (function(dep1, dep2) {

  var mymodule = {};

  mymodule.foo = function() {
    return 'hello world';
  };

  return mymodule;

})(dependency1, dependency2);

mymodule.foo();

The downside to this approach was that you had to load the dependencies in order, usually via a plethora of script tags.

RequireJS and AMD

RequireJS is a javascript module loader for the browser. The main selling point here is that it can load modules on-demand and cache them for future calls. It uses the AMD module spec which looks like this:

//mymodule.js

define(["./dependency1", "./dependency2"], function(dependency1, dependency2) {
  return {
    foo: function() {
      return 'hello world';
    }
  };
});

You then use such a module like this:

require(["mymodule"], function(mymodule) {
  mymodule.foo()
});

Browserify and CommonJS

CommonJS is more or less the same module loading that you see in Node.js. Using Browserify you can take NPM modules and use them in the browser. This approach is far simpler than RequireJS but rather than using on-demand loading it instead parses the dependency tree and concatenates everything into isolated modules that can be cached. CommonJS looks like this:

// mymodule.js

var dependency1 = require('dependency1');
var dependency2 = require('dependency1');

exports.foo = function() {
  return 'hello world';
};

And its usage:

var mymodule = require('./mymodule.js');
mymodule.foo();

ES6

As you can see the different module systems are divergent and can be a pain if your dependency doesn’t implement both. Fortunately the next version of javascript is on the horizon and has solved the module issue. Here is how you’ll do this in ES6:

// mymodule.js

import dependency1 from 'dependency1';
import dependency2 from 'dependency2';

export default function foo() {
  return 'hello world';
}

And its usage:

import foo from 'mymodule';
foo();

This is due to hit late-2014/early-2015. It will be interesting to see what becomes of RequireJS and CommonJS.

comments

Tagged: javascript amd commonjs es6 harmony ecmascript

2017 Ben Lakey

The words here do not reflect those of my employer.