ECMAScript 6 Modules: What Are They and How to Use Them Today

One of the essentials features any platform needs to support code bases beyond a few source files are modules. Until now, JavaScript has not supported modules natively. As a result, various solutions have been developed to add modules as a library, for instance CommonJS modules (partially implemented by node.js) and require.js. However, as of the next version of JavaScript (officially named ECMAScript 6) modules will finally be added as first-class citizen to the language. Axel Rauschmayer wrote a introductory article about ECMAScript 6 modules, explaining what they are, how to use them, and your options if you want to use them today (using transpilers).

Axel lays out the design goals of ES6 modules as follows:

The goal for ECMAScript 6 (ES6) modules was to create a format that both users of CJS and of AMD are happy with. To that end, their syntax is as compact as CJS. On the other hand, they are less dynamic than CJS (e.g., you can’t conditionally load a module with normal syntax). That has two main advantages:

• You get compile time errors if you try to import something that has not been exported.
• You can easily load ES6 modules asynchronously.

The ES6 module standard has two parts:

1. Declarative syntax (for importing and exporting).
2. Programmatic loader API: to configure how modules are loaded and to conditionally load modules.

ES6 modules no longer require the developer to do the awkward wrapping of the entire JavaScript file into an object or function closure, as was the case with most asynchronous module loaders in the browser before. Instead, definitions can be specified at top level and only functions and variables explicitly exported will be exposed to the module's consumer:

var privateVar = "this is a variable private to the module";
export var publicVar = "and this one is public";

export function returnPrivateVar() {
   return privateVar;
};

Assuming we put the previous code in mymodule.js, we can now import it in two ways, either by importing specific functions and variables, or by importing a module as a module object:

import { returnPrivateVar, publicVar } from 'mymodule';
console.log(returnPrivateVar());

// Or, alternatively:
import 'mymodule' as mm;
console.log(mm.returnPrivateVar());

The new module standard also supports in-line definition of modules and dynamic module loading. To learn more about these, read Axel's article.

If you want to try out the new module syntax today, there are a few options available already:

• es6-module-transpiler compiles ES6 modules to either AMD or CommonJS style modules
• ES6 module loader is a polyfill that supports loading of ES6-style modules.
• require-hm is a require.js plugin that supports loading of ES7 modules.
• Traceur is Google's transpiler that aims to support many future JavaScript features, including ES6 modules.
• TypeScript is Microsoft's optionally typed version of JavaScript, which also supports ES6 modules.