ES6 modules are loaded at compile time, and the dependencies of modules can be determined at compile time.
ES6 module is not an object, but the output code is explicitly specified through the export command, and then input through the import command.

//ES6 module
import { stat, exists, readFile } from 'fs';

The above code essentially loads three methods from the fs module, and other methods are not loaded. This loading is called "loading at compile time" or static loading, that is, ES6 can complete module loading at compile time.

import()

The ES2020 proposal introduces the import() function to support dynamic loading of modules.

import(specifier)

In the above code, the parameter specifier of the import function specifies the location of the module to be loaded.
import() returns a Promise object. Here is an example.

const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
.then(module => {
	module.loadPageInto(main);
})
.catch(err => {
	main.textContent = err.message;
});

export command

A module is an independent file. Unable to get all external variables of this file, internal variables cannot be obtained. If you want the external to be able to read a variable inside the module, you must use the export keyword to output the variable. The following is a JS file that uses the export command to output variables.

• Writing method 1:

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

export function multiply(x, y) {
	return x * y;
};

• Method 2:

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

function v1() { ...}
function v2() {...}

export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVerstion

• Error reporting method:

//report errors
export 1;

//report errors
var m = 1;
export m;

The above two methods will report errors because there is no external interface provided. The first method outputs 1 directly, and the second method outputs 1 directly through variable m. 1 is just a value, not an interface. The correct wording is as follows:

//Writing method I
export var m = 1;

//Writing method 2
var m = 1;
export {m};

//Writing method III
var n = 1;
export {n as m};

import command

import {firstName, lastName, year} from './profile.js';
function setName(element) {
 	element.textContent = firstName + ' '+ lastName;
 }

//rename
import {lastName as surname } from  './profile.js';

The from after import specifies the location of the module file, which can be a relative path or an absolute path js suffix can be omitted. If it is only a module name without a path, there must be a configuration file to tell the JavaScript engine the location of the module.

import {myMethod} from  'util';

In the above code, util is the module file name. Since there is no path, it must be configured to tell the engine how to get this module.

Overall loading of modules

import * as circle from './circle';
console.log('Circular area:'+circle.area(4));
console.log('Circumference:'+circle.circumference(14));

export default command

Default output

// export-default.js
export default function () {
	console.log('foo');
}

When other modules load the module, the import command can specify any name for the anonymous function.

// import-default.js
import customName from './export-default';
customName(); // 'foo'

The export default command only outputs a variable called default, so it cannot be followed by a variable declaration statement.

// correct
export var a = 1;
// correct
var a = 1;
export default a;
// error
export default var a = 1;

In the above code, export default a means to assign the value of variable a to variable default. Therefore, the last way of writing will report an error.
export default can also be used to output classes.

// MyClass.js
export default class {...}

//main.js
import MyClass from 'MyClass';
let o = new MyClass();