ES6 cheatsheet — Modules
Serban Mihai / 20 October 2018
~2 min read
Prior to ES6, we used libraries such as Browserify to create modules on the client-side, and require in Node.js. With ES6, we can now directly use modules of all types (AMD and CommonJS).
Exporting in CommonJS
module.exports = 1;
module.exports = { foo: 'bar' };
module.exports = ['foo', 'bar'];
module.exports = function bar () {};
Exporting in ES6
Named Exports:
export function multiply (x, y) {
return x * y;
};
As well as exporting a list of objects:
function add (x, y) {
return x + y;
};
function multiply (x, y) {
return x * y;
};
export { add, multiply };
Default export:
In our module, we can have many named exports, but we can also have a default export. It’s because our module could be a large library and with default export we can import then an entire module.
Important to note that there’s only one default export per module
.
export default function (x, y) {
return x * y;
};
This time we don’t have to use curly braces for importing and we have a chance to name imported statement as we wish.
import multiply from 'module';
// === OR ===
import whatever from 'module';
A module can have both named exports and a default export:
// module.js
export function add (x, y) {
return x + y;
};
export default function (x, y) {
return x * y;
};
// app.js
import multiply, { add } from 'module';
The default export is just a named export with the special name default.
// module.js
export default function (x, y) {
return x * y;
};
// app.js
import { default } from 'module';
Importing in ES6
import { add } from 'module';
We can even import many statements:
import { add, multiply } from 'module';
Imports may also be aliased:
import {
add as addition,
multiply as multiplication
} from 'module';
and use wildcard (*
) to import all exported statemets:
import * from 'module';
You can find a more complete ES6 cheetsheet on my Github page.
P.S. If you ❤️ this, make sure to follow me on Twitter, and share this with your friends 😀🙏🏻