ES6 Module Importing and Exporting

Introduction to Modules

Modules are like Lego bricks for your JavaScript applications. They allow you to break your code into reusable, independent pieces that can be shared across files. In this lesson, you’ll explore the powerful ES6 module syntax and how it improves upon older CommonJS modules.

By the end of this lesson, you’ll know how to:

Exporting Multiple Items

When you need to export multiple items from a single file, ES6 offers two approaches. Let’s compare:

1. Exporting as an Object (Not Recommended)


// This is similar to CommonJS exports but is not the preferred ES6 method.
class Wallet {
  // ...
}
function sayHello() {
  console.log('Hello!');
}
const sayHi = () => {
  console.log('Hi!');
};

export { Wallet, sayHello, sayHi };

While this works, it doesn’t take full advantage of ES6 syntax. Instead, export items directly as they are defined.

2. Exporting Directly (Preferred)


export class Wallet {
  // ...
}
export function sayHello() {
  console.log('Hello!');
}
export const sayHi = () => {
  console.log('Hi!');
};

Analogy: Imagine packing boxes for shipping. Exporting directly is like labeling each item individually as you pack, making it easier to unpack later.

Importing Items

To import items from a file, use import. Here’s an example: 


// Import specific items by their names
import { Wallet, sayHello } from './wallet';

// Use the imported items
const myWallet = new Wallet();
sayHello(); // Outputs: Hello!

ES6 imports must always be declared at the top of the file, unlike CommonJS’s require, which can appear anywhere.

Exporting and Importing a Default Item

Exporting a Default Item


export default class Wallet {
  // ...
}

// This file will only export the Wallet class.

Importing a Default Export

Default exports allow you to rename the imported item: 


// wallet.js
export default class Wallet {
  // ...
}

// newFile.js
import Money from './wallet';

const wallet = new Money();

Note: Named exports require the exact name match, while default exports give you flexibility.

Aliasing and Namespacing Imports

Using * to Import All


// greetings.js
export function sayHello() {
  console.log('Hello!');
}
export const sayHi = () => {
  console.log('Hi!');
};

// newFile.js
import * as Greetings from './greetings';

Greetings.sayHello(); // Outputs: Hello!
Greetings.sayHi();    // Outputs: Hi!

Aliasing for Conflicting Names

If two files export items with the same name, aliasing can avoid conflicts: 


import { Wallet as W1 } from './wallet1';
import { Wallet as W2 } from './wallet2';

const wallet1 = new W1();
const wallet2 = new W2();

Browser Support for ES6 Modules

To use ES6 modules in a browser, specify the file as a module using the type="module" attribute in a <script> tag:

Alternatively, specify the module type in package.json for Node.js applications: 


{
  "type": "module"
}

Key Takeaways