ES6 Modules Cheatsheet | Quick Reference Guide

This blog post serves as a quick reference aka cheatsheet( primarily intended for my future self ), to understand the syntactic peculiarities of the ES6 style of module exports with a quick glance.

DEFAULT EXPORT & IMPORT

Export an anonymous function as default and then import it with a name.

export default function(){ ... };

import anyName from '...';

Export an anonymous arrow function as default and then import it with a name.

export default () => { ... };

import anyName from '...';

Export a function as default after it has been declared and then import it with a name.

function foo(){ 
  ... 
}
export default foo;

import anyName from '...';

Export a variable as default after it has been declared and then import it with a name.

const foo = () => { ... };
export default foo;

import anyName from '...';

Another way to export a variable as default and then import it with a name.

export { foo as default };

import anyName from '...';

Default + Named export followed by a Default + Named import.

export { foo as default, bar };

import { default as anyName, bar } from '...';

NAMED EXPORT & IMPORT

Export inline with each declaration.

export const foo = () => { ... };

export function bar(){ ... };

Export at the end after all declarations

const foo = () => { ... };
function bar(){ ... };

export { foo, bar };

Import a single export.

import { foo } from '...';

Import multiple exports.

import { foo, bar } from '...';

IMPORT ALL

Import everything into an object. All exports will be referenced as the object properties including the default export.

import * as obj from '...';

obj.default();
obj.bar();

You can also name the default during import and also import all named exports into an object.

import foo, * as obj from '...';

foo();
obj.default();
obj.bar();

RENAMING EXPORTS & IMPORTS

Rename during export and then import as is.

export { foo, bar as baz };

import { foo, baz } from '...';

Export as is and then rename during import.

export { foo, bar };

import { foo, bar as baz } from '...';

MIXED EXPORT & IMPORT

Export some functions inline and others post declaration in the same module.

// export inline
export default () => { ... };
export const bar = () => { ... };

// export after declaration
function baz(){ ... }
export { baz };

Then during import, name the default, do a named as well as a renamed export.

import { default as foo, bar, baz as pie } from '...';
foo(); bar(); pie();

RE-EXPORT USING export from ...

We'll be using two modules: first.js and second.js. The latter will re-export or forward the exports from the former.

export { foo as default, bar, baz };

In second.js, we'll do a simple re-export of only the default.

export { default } from 'first.js';

And then import the default from second.js like we have seen before.

import foo from 'second.js';

Next, we'll re-export the default along with another named export.

export { default, bar } from 'first.js';

And then we'll do a named import of both.

import { default as foo, bar } from 'second.js';

Next, in second.js, we'll add a renamed export to the mix.

export { default, bar, baz as pie } from 'first.js';

And then we'll do a named import of all the three forwarded exports.

import foo, { bar, pie } from 'second.js';