ES6 exports and import use

When creating a JavaScript module, export used to export real-time bound functions, objects or primitive values from the module so that other programs can use them import
The exported binding value can still be modified locally.
When using import to import, these binding values can only be read by the import module, but if these binding values are modified in the export module, the modified values will also be updated in real time.

exports

ES6 module only supports static export . It can only be used in the outermost scope of the module. export can not be used in conditional statements and function scopes.

Named exports

This method is mainly used to export multiple functions or variables, knowing the name of the exported variable clearly.
export keyword in front of the variable or function.
Usage scenarios: For example, tool-like function sets such as utils, tools, common, etc., or uniform variables throughout the site, etc.

1. An expression cannot be followed by export, because an expression has only a value and no name.
2. Each module contains any number of exports.

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}


// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121

// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

The abbreviated format, uniformly lists the variables that need to be output, for example, the above lib.js can be rewritten as:

// lib.js
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export { sqrt, square, add };

Default exports

This method is mainly used to export a class file or a function file with a single function;
export default keyword in front of the variable or function.

1. Each module can only have one default export at most;
2. The default export can be regarded as the module output variable default
3. The default export can be followed by an expression, because it only requires a value.

Export a value:

export default 123;

Export a function:

// myFunc.js
export default function () { ... };

// index.js
import myFunc from 'myFunc';
myFunc();

Export a class:

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };

// index.js
import MyClass from 'MyClass';

The difference between export default and export:

• No need to know the specific variable name exported;
• {} Package is not needed when importing [import];

Combinations exports

The hybrid export is a combination Named exports and Default exports

After mixed export, the default import must be placed before the named import;

// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
  ...
}
export function* myGeneratorFunc() {
  ...
}
export default class MyClass {
  ...
}

// index.js
import MyClass, { myValue, myFunc } from 'lib';

Re-exporting (alias export)

Under normal circumstances, the variable name exported by export is the variable name in the original file, but the as can also be used to specify the alias. This is done to simplify or semanticize the export function name.

The same variable can be output multiple times with different names

// lib.js
function getName() {
   ...
};
function setName() {
  ...
};

export {
  getName as get,
  getName as getUserName,
  setName as set
}

Module Redirects (transfer module export)

In order to facilitate the use of module import, "import-export" different modules in a parent module. In simple terms: create a single module and concentrate multiple exports of multiple modules.
Use: Use export from syntax to achieve;

export * from 'lib'; // 没有设置 export default
export * as myFunc2 from 'myFunc'; // 【ES2021】没有设置 export default

export { default as function1, function2 } from 'bar.js'; 

The above example uses a combination of import and export:

import { default as function1, function2 } from 'bar.js';
export { function1, function2 };

Although export is equivalent to import at this time, the following syntax is syntactically invalid:

import DefaultExport from 'bar.js'; // 有效的
export DefaultExport from 'bar.js'; // 无效的

The correct approach is to rename this export:

export { default as DefaultExport } from 'bar.js';

Importing

// Named imports
import { foo, bar as b } from './some-module.mjs';

// Namespace import
import * as someModule from './some-module.mjs';

// Default import
import someModule from './some-module.mjs';

// Combinations:
import someModule, * as someModule from './some-module.mjs';
import someModule, { foo, bar as b } from './some-module.mjs';

// Empty import (for modules with side effects)
import './some-module.mjs';