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

| by Zef Hemel Follow 0 Followers on Aug 01, 2013. Estimated reading time: 2 minutes |

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';
// Or, alternatively:
import 'mymodule' as mm;

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.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you