JS: Module. Static Import

By Xah Lee. Date: . Last updated: .

(new in ECMAScript 2015)

Import syntax for default export

import newName from moduleSpecifier;

import the default export value at moduleSpecifier and name it newName in your source code.

Import syntax for named export

import { name1 , name2 , etc } from moduleSpecifier;

Import a list of names. Each of the name must be explicited exported by the module.

import { name1 as new1 , etc } from moduleSpecifier;

Import a list of exported names with new alias. Your code access the imported symbols by their new name, e.g. new1

import * as newName from moduleSpecifier;

Get all exported names from moduleSpecifier, attach to newName as properties.

Just load module (for side-effect)

This just load the module

import moduleSpecifier;

use this for modules that setup global variables or update browser methods, etc.

// example of a module that add to global variable
globalThis.x = 6503;

How do you know if a module has named export or default export

There is no general way. You just read the module's documentation or look at the source code.