es6-modules-cheatsheet
es6-modules-cheatsheet copied to clipboard
sstur
ES6 (ES2015) Modules Cheatsheet
ES6 (ES2015) Modules Cheatsheet
This document is adapted from an excellent proposal by leebyron.
Imports and Exports:
| Import Statement Form | [[ModuleRequest]] | [[ImportName]] | [[LocalName]] |
|---|---|---|---|
import v from "mod"; |
"mod" |
"default" |
"v" |
import {default as v} from "mod"; |
"mod" |
"default" |
"v" |
import * as ns from "mod"; |
"mod" |
"*" |
"ns" |
import {x} from "mod"; |
"mod" |
"x" |
"x" |
import {x as v} from "mod"; |
"mod" |
"x" |
"v" |
import "mod"; |
| Export Statement Form | [[ModuleRequest]] | [[ImportName]] | [[LocalName]] | [[ExportName]] |
|---|---|---|---|---|
export var v; |
null | null | "v" |
"v" |
export default function f(){}; |
null | null | "f" |
"default" |
export default function(){}; |
null | null | "*default*" |
"default" |
export default 42; |
null | null | "*default*" |
"default" |
export {x}; |
null | null | "x" |
"x" |
export {x as v}; |
null | null | "x" |
"v" |
export {x as default}; |
null | null | "x" |
"default" |
export {x} from "mod"; |
"mod" |
"x" |
null | "x" |
export {x as v} from "mod"; |
"mod" |
"x" |
null | "v" |
export {default as v} from "mod"; |
"mod" |
"default" |
null | "v" |
export * from "mod"; |
"mod" |
"*" |
null | null |
Symmetry between import and export
There's a syntactic symmetry between the export-from statements and the import statements they resemble. There is also a semantic symmetry; where import creates a locally named binding, export-from creates an export entry.
As an example:
export {v} from "mod";
Is symmetric to:
import {v} from "mod";
Table showing symmetry
| Statement Form | [[ModuleRequest]] | [[ImportName]] | [[LocalName]] | [[ExportName]] |
|---|---|---|---|---|
import v from "mod"; |
"mod" |
"default" |
"v" |
|
import * as ns from "mod"; |
"mod" |
"*" |
"ns" |
|
import {x} from "mod"; |
"mod" |
"x" |
"x" |
|
export {x} from "mod"; |
"mod" |
"x" |
null | "x" |
import {x as v} from "mod"; |
"mod" |
"x" |
"v" |
|
export {x as v} from "mod"; |
"mod" |
"x" |
null | "v" |
export * from "mod"; |
"mod" |
"*" |
null | null (many) |
Compound statements
You can also import the default value and named values in a compound statement:
import v, {x, y as w} from "mod";
// which is the same as:
import {default as v, x, y as w} from "mod";
As well as
import v, * as ns from "mod";
sstur