ES2015 / ES NEXT modules syntax

tl;dr

Table of contents

• ⬇️ Basic imports
  • Default
  • Named
  • Alias
  • Namespace
  • Bare
• ⏬ Advanced imports
  • Default with Named or Namespace (mixed)
• ⬆️ Basic exports
  • Default
  • Named
  • Lazy
  • Empty (Unambiguous JavaScript Grammar)
• ⏫ Advanced exports
  • Export with destructuring
  • Export with comma separated variables
• 🔁 Basic re-exports
  • Named
  • Alias
  • Namespace
• 🔀 Advanced re-exports
  • Named as Default
  • Default as Named
  • Default as Default
  • Namespace as aliased Namespace (ES Next proposal)

⬇️ Basic imports

Default

import module from 'module';

Named

import {prop} from 'module';

Alias

import {prop as alias} from 'module';

Namespace

import * as moduleAll from 'module';

Bare

import 'module';

⬆ Back to top

⏬ Advanced imports

Default with Named or Namespace (mixed)

import React, {Component, PropTypes} from 'react';
import module, * as moduleAll from 'module';

Note: Default export should always be preceded.

⬆ Back to top

⬆️ Basic exports

Default

/* Export value as default */
export default Math.PI;

/* Export arrow function expression as default */
export default (x) => x * x * x;

/* Export variable as default */
const a = 123;
export default a;

/* Export class declaration as default */
export default class A {
  constructor(a = 0) {
    this.setA(a);
  }

  getA() {
    return this.a;
  }

  setA(a = 0) {
    this.a = a;
  }
}

/* Export function declaration as default */
// In this case, you can omit the name of the function. Even if there is no function name it still treats to function declaration. This rule affects `classes` and `generator functions` as well.
// See http://exploringjs.com/es6/ch_modules.html#_default-export-style-1-labeling-declarations
export default function (x) {
  return x * x * x;
}

Note: Default Export should be one per module.

Named

/* Export variable */
export const pi = Math.PI;

/* Export variable, which contains arrow function expression */
export const str = () => `
bla
bla
bla
`;

/* Export let variable, but will be read-only */
export let foo = 'bar';

/* Export function declaration */
export function gcd(a, b) {
  if (!b) {
    return a;
  }

  return gcd(b, a % b);
}

/* Export class declaration */
export class A {
  constructor(a = 0) {
    this.setA(a);
  }

  getA() {
    return this.a;
  }

  setA(a = 0) {
    this.a = a;
  }
}

Lazy

const pi = Math.PI;

function calcPlus(a, b) {
  return a + b;
}

function getRandomInt(max = 10, min = 0) {
  return Math.trunc(min + Math.random() * (max - min + 1));
}

export {
  pi, // Export
  calcPlus as plus, // Export as alias
  getRandomInt as default, // Export as default (trailing comma is not necessary)
};

Empty (Unambiguous JavaScript Grammar)

export {};

• Unambiguous JavaScript Grammar

⬆ Back to top

⏫ Advanced exports

Export with destructuring

const obj = {
  a: 123,
  b: 321,
};

export const {a, b} = obj;

Export with comma separated variables

export const a = 123, b = 321, c = 321;

⬆ Back to top

🔁 Basic re-exports

Named

export {prop} from 'module';

Alias

export {prop as alias} from 'module';

Namespace

export * from 'module';

Note: Namespace Entries Re-Export does not export default.

⬆ Back to top

🔀 Advanced re-exports

Named as Default

export {prop as default} from 'module';

Default as Named

export {default as prop} from 'module';
export prop from 'module'; // ES Next proposal

• ECMAScript Proposal: export default from

Default as Default

export {default} from 'module';
export default from 'module'; // ES Next proposal

• ECMAScript Proposal: export default from

Namespace as aliased Namespace (ES Next proposal)

export * as ns from 'module';

• ECMAScript Proposal: export ns from

⬆ Back to top

References

• ECMAScript-262 6.0 specification
• ExploringJS modules
• MDN import
• MDN export

License

MIT