title |
---|
ES Module Syntax |
The following is intended as a lightweight reference for the module behaviors defined in the ES2015 specification, since a proper understanding of the import and export statements are essential to the successful use of Rollup.
Imported values cannot be reassigned, though imported objects and arrays can be mutated (and the exporting module, and any other importers, will be affected by the mutation). In that way, they behave similarly to const
declarations.
Import a specific item from a source module, with its original name.
import { something } from './module.js';
Import a specific item from a source module, with a custom name assigned upon import.
import { something as somethingElse } from './module.js';
Import everything from the source module as an object which exposes all the source module's named exports as properties and methods.
import * as module from './module.js'
The something
example from above would then be attached to the imported object as a property, e.g. module.something
. If present, the default export can be accessed via module.default
.
Import the default export of the source module.
import something from './module.js';
Load the module code, but don't make any new objects available.
import './module.js';
This is useful for polyfills, or when the primary purpose of the imported code is to muck about with prototypes.
Import modules using the dynamic import API.
import('./modules.js').then(({ default: DefaultExport, NamedExport })=> {
// do something with modules.
})
This is useful for code-splitting applications and using modules on-the-fly.
Export a value that has been previously declared:
const something = true;
export { something };
Rename on export:
export { something as somethingElse };
Export a value immediately upon declaration:
// this works with `var`, `let`, `const`, `class`, and `function`
export const something = true;
Export a single value as the source module's default export:
export default something;
This practice is only recommended if your source module only has one export.
It is bad practice to mix default and named exports in the same module, though it is allowed by the specification.
ES modules export live bindings, not values, so values can be changed after they are initially imported as per this demo:
// incrementer.js
export let count = 0;
export function increment() {
count += 1;
}
// main.js
import { count, increment } from './incrementer.js';
console.log(count); // 0
increment();
console.log(count); // 1
count += 1; // Error — only incrementer.js can change this