ES6 Modules By Example

As a frontend developer your world is now being expressed as ES6 modules. Whether you are using React, Angular 2, Ember, or another forward thinking library or framework an understanding of the ES6 module system is crucial. With a grasp on basic module syntax, tools like Webpack, Browserify, or SystemJS can take your development and build process workflow to the next level. Let’s dive in and explore the most common use cases for the import and export of ES6 modules.

1.) Default Export / Import

export default () => 'Default Export!';
import testing from './exportExample';

The most common scenario you will encounter when working with ES6 modules is default exports and imports. Default exports are declared with the export default keywords and can be imported without a named, destructuring style assignment. One default export per file is allowed but these can be coupled with named exports when required. The name you assign from your import statement is arbitrary as you will always import the default export from the specified file when utilizing this syntax.

2.) Named Export / Named Import

export function export1() {};
export function export2() {};
import { export1, export2 } from './exportExample';

Unlike default exports, named exports cannot be imported without specifically referring to the proper exported value. Multiple named exports can be imported at once with comma seperated, destructuring syntax and are highly useful when you want to import or export a particular piece of functionality. One common example of this would be the JavaScript utility library Lodash. Each method can be imported by name, allowing for advanced build tools like Webpack to optimize your JavaScript bundle, including only the pieces of the applicable libraries that are required in production.

3.) Aliased Export / Named Import

function export1() {};
export { export1 as testing }
import { testing } from './exportExample';

Similar to named exports, aliased exports can be used when you prefer the name of the export to be different from the name of the function or variable being exported. This is less used in practice but is available when necessary.

4.) Named Export / Aliased Import

export function export1(){};
import { export1 as helloWorld } from './exportExample';

Aliased imports are similar to named imports except for the renaming of the value being imported. This can be useful in cases you where you have conflicting names between two imports, or when you feel an export name provided is ambiguous with some other functionality in your application.

5.) Export / Import *

export default function() {}
export function export1() {}
import * as multipleExports from './exportExample'

When multiple exports are declared per file all exports can be imported at once using the import * as syntax. The subsequent import is presented as an object map of all exported functionality from the imported file. If a default export is declared in the imported file this will be assigned the property name ‘default’, with all other imports falling under their particular export name.
Import * is often used when aggregate files are created to hold one particular kind of export, designed to be imported all at once.

Future Considerations (ES7)
There are currently several new export statements in stage 1 proposal for ES7. Feel free to check them out using Babel and give feedback as you see fit. Future JavaScript specifications are being decided now!

ES6 modules allow us to express and structure our applications in a clearer, more composable manner. Modern development and build tooling takes this to the next level by optimizing your workflow and output for production. With an understanding of a few simple paradigms the way you write your frontend will never be the same! As always, feel free to drop me any feedback or suggestions. Until next time, happy coding!

Next ArticleUnderstand and Utilize the Async Pipe in Angular 2