JSModules.md

AMD, CommonJS and ES6 modules

AMD

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems.

Example:

// A module_id (myModule) is used here for demonstration purposes only
 
define('myModule', 
    ['foo', 'bar'], 
    // module definition function
    // dependencies (foo and bar) are mapped to function parameters
    function ( foo, bar ) {
        // return a value that defines the module export
        // (i.e the functionality we want to expose for consumption)
    
        // create your module here
        var myModule = {
            doStuff:function(){
                console.log('Yay! Stuff');
            }
        }
 
        return myModule;
});
 
// An alternative example could be..
define('myModule', 
    ['math', 'graph'], 
    function ( math, graph ) {
 
        // Note that this is a slightly different pattern
        // With AMD, it's possible to define modules in a few
        // different ways due as it's relatively flexible with
        // certain aspects of the syntax
        return {
            plot: function(x, y){
                return graph.drawPie(math.randomGrid(x,y));
            }
        }
    };
});

CommonJS

Addy Osmany:

From a structure perspective, a CJS module is a reusable piece of JavaScript which exports specific objects made available to any dependent code - there are typically no function wrappers around such modules (so you won't see define used here for example).

At a high-level they basically contain two primary parts: a free variable named exports which contains the objects a module wishes to make available to other modules and a require function that modules can use to import the exports of other modules.

Example:

// define more behaviour we would like to expose
function foobar(){
        this.foo = function(){
                console.log('Hello foo');
        }
 
        this.bar = function(){
                console.log('Hello bar');
        }
}
 
// expose foobar to other modules
exports.foobar = foobar;
 
 
// an application consuming 'foobar'
 
// access the module relative to the path
// where both usage and module files exist
// in the same directory
 
var foobar = require('./foobar').foobar,
    test   = new foobar();
 
test.bar(); // 'Hello bar'

ES6 Modules

CommonJS Modules: The dominant implementation of this standard is in Node.js (Node.js modules have a few features that go beyond CommonJS). Characteristics:

• Compact syntax
• Designed for synchronous loading
• Main use: server

Asynchronous Module Definition (AMD): The most popular implementation of this standard is RequireJS. Characteristics: Slightly more complicated syntax, enabling AMD to work without eval() (or a compilation step).

• Designed for asynchronous loading
• Main use: browsers

Example:

// export from module
export const square = (n) => n * n;

// import to module
import {square} form 'math';
console.log(square(2)); //4

Export variables/functions/etc:

// lib code
export const A = 1;
export const B = 2;

// INCORRECT
import lib from 'lib';
console.log(lib.A);

// CORRECT
import { A } from 'lib';
console.log(A);

// lib code
const A = 1;
const B = 2;

export { A, B }

// INCORRECT
import { A } from 'lib';
console.log(A);

// CORRECT
import lib from 'lib';
console.log(lib.A);

Export default:

//------ underscore.js ------
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

//------ main.js ------
import _, { each } from 'underscore';

Useful links:

• Writing Modular JavaScript With AMD, CommonJS & ES Harmony by Addy Osmany
• ECMAScript 6 modules: the final syntax by Dr. Axel Rauschmayer
• AMD Specification