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';
Top comments (0)