This document compares different module systems for JavaScript including CommonJS, AMD, and ES2015 modules. It shows examples of how to export and import values between modules using these different systems. CommonJS exports values using module.exports while AMD uses a define function. ES2015 modules introduce new export and import keywords and allow for named exports, default exports, namespaced imports, and export/import aliases.

2. CommonJS Modules
var PI = 3.14159265359;
function circumference(radius) {
return 2 * PI * radius;
}
function area(radius) {
return PI * radius * radius;
}
module.exports = {
PI: PI,
circumference: circumference,
area: area
};
var geometry = require('./geometry');
var circumference = geometry.circumference(10);
var area = geometry.area(10);
geometry.js
app.js
Runtime provides
module reference
Functions are
namespaced to
module

3. AMD Modules
geometry.js
define('geometry', [], function () {
var PI = 3.14159265359;
function circumference(radius) {
return 2 * PI * radius;
}
function area(radius) {
return PI * radius * radius;
}
return {
PI: PI,
circumference: circumference,
area: area
};
});
app.js
define(['geometry'], function (geometry) {
var circumference = geometry.circumference(10);
var area = geometry.area(10);
});
Dependencies
specified in array
passed to define
Module returned
as object

4. ES2015 Modules: Named Exports
export const PI = 3.14159265359;
export function circumference(radius) {
return 2 * PI * radius;
}
export function area(radius) {
return PI * radius * radius;
}
geometry.js
import { circumference, area } from './geometry';
const theCircumference = circumference(10);
const theArea = area(10);
app.js
New export
keyword
New import
keyword
Dependencies
imported by name

5. ES2015 Modules: Named Exports
const PI = 3.14159265359;
function circumference(radius) {
return 2 * PI * radius;
}
function area(radius) {
return PI * radius * radius;
}
export { PI, circumference, area };
geometry.js
import { circumference, area } from './geometry';
const theCircumference = circumference(10);
const theArea = area(10);
app.js
Exports at end of
file
Same imports

6. ES2015 Modules: Namespaced Imports
export const PI = 3.14159265359;
export function circumference(radius) {
return 2 * PI * radius;
}
export function area(radius) {
return PI * radius * radius;
}
geometry.js
import * as geometry from './geometry';
Const circumference = geometry.circumference(10);
const area = geometry.area(10);
app.js
Same as before
Imported
dependencies
namespaced

7. ES2015 Modules: Default Export
import React from 'react';
export default class LoginPage extends React.Component {
render() {
return <form> ... </form>;
}
}
LoginPage.jsx
import ReactDOM from 'react-dom';
import LoginPage from './LoginPage’;
ReactDOM.render(<LoginPage />,
document.getElementById('app');
App.jsx
Default export
Alias for default
export
import ReactDOM from 'react-dom';
import AppLoginPage from './LoginPage’;
ReactDOM.render(<LoginPage />,
document.getElementById('app');
App.jsx
Alias does not
have to match
exported item
name

8. ES2015 Modules: Mixed Exports
import React from 'react';
import { connect } from 'react-redux';
export class TodoList extends React.Component {
render() {
return <div> ... </div>;
}
}
export default connect()(TodoList);
TodoList.jsx
import ReactDOM from 'react-dom';
import ConnectedTodoList from './TodoList';
ReactDOM.render(<ConnectedTodoList />,
document.getElementById('app');
App.jsx
import TestUtils from 'react-addons-test-utils';
import { TodoList } from '../components/TodoList';
const todoList = TestUtils.renderIntoDocument(<TodoList />);
TodoListTest.jsx
Default export
and named export
Using default
export
Using named
export

9. ES2015 Modules: Mixed Imports
const ACTIONS = {
LOG_IN: 'LOG_IN',
LOG_OUT: 'LOG_OUT'
};
export default ACTIONS;
export function login(username, password) { ... }
export function logout()
actions.js
import actions, { login, logout } from '../actions/actions';
console.log(`Performing action ${actions.LOG_OUT}`);
logout();
app.js
Importing default
export and named
exports
Using default
export and named
exports
Referencing
default export
Referencing
named export

10. ES2015 Modules: Aliases
function myReallyLongFunctionName() {
...
}
export { myReallyLongFunctionName as foo };
module.js
import { foo as someOtherName } from './module';
someOtherName();
app.js
foo is aliased as
someOtherName
Long function
name is aliased as
foo