DEV Community

Cover image for ES6 Modules Cheatsheet | Quick Reference Guide
Saurabh Misra
Saurabh Misra

Posted on • Originally published at saurabhmisra.dev

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 '...';
Enter fullscreen mode Exit fullscreen mode

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

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

import anyName from '...';
Enter fullscreen mode Exit fullscreen mode

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 '...';
Enter fullscreen mode Exit fullscreen mode

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 '...';
Enter fullscreen mode Exit fullscreen mode

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

export { foo as default };

import anyName from '...';
Enter fullscreen mode Exit fullscreen mode

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

export { foo as default, bar };

import { default as anyName, bar } from '...';
Enter fullscreen mode Exit fullscreen mode

NAMED EXPORT & IMPORT

Export inline with each declaration.

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

export function bar(){ ... };
Enter fullscreen mode Exit fullscreen mode

Export at the end after all declarations

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

export { foo, bar };
Enter fullscreen mode Exit fullscreen mode

Import a single export.

import { foo } from '...';
Enter fullscreen mode Exit fullscreen mode

Import multiple exports.

import { foo, bar } from '...';
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

RENAMING EXPORTS & IMPORTS

Rename during export and then import as is.

export { foo, bar as baz };

import { foo, baz } from '...';
Enter fullscreen mode Exit fullscreen mode

Export as is and then rename during import.

export { foo, bar };

import { foo, bar as baz } from '...';
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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

export { default } from 'first.js';
Enter fullscreen mode Exit fullscreen mode

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

import foo from 'second.js';
Enter fullscreen mode Exit fullscreen mode

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

export { default, bar } from 'first.js';
Enter fullscreen mode Exit fullscreen mode

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

import { default as foo, bar } from 'second.js';
Enter fullscreen mode Exit fullscreen mode

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

export { default, bar, baz as pie } from 'first.js';
Enter fullscreen mode Exit fullscreen mode

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

import foo, { bar, pie } from 'second.js';
Enter fullscreen mode Exit fullscreen mode

Top comments (0)