exports

ES6模組只支援靜態匯出，只可以在模組的最外層作用域使用export，不可在條件語句與函式作用域中使用。

Named exports (命名匯出)

這種方式主要用於匯出多個函式或者變數, 明確知道匯出的變數名稱。
使用：只需要在變數或函式前面加export關鍵字即可。
使用場景：比如 utils、tools、common 之類的工具類函式集，或者全站統一變數等。

export 後面不可以是表示式，因為表示式只有值，沒有名字。
每個模組包含任意數量的匯出。

// 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

簡寫格式，統一列出需要輸出的變數，例如上面的lib.js可以改寫成：

// 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 (預設匯出)

這種方式主要用於匯出類檔案或一個功能比較單一的函式檔案；
使用：只需要在變數或函式前面加export default關鍵字即可。

每個模組最多隻能有一個預設匯出；
預設匯出可以視為名字是default的模組輸出變數；
預設匯出後面可以是表示式，因為它只需要值。

匯出一個值：

exportdefault123;

匯出一個函式：

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

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

匯出一個類：

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

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

export default 與 export 的區別：

不需要知道匯出的具體變數名；

匯入【import】時不需要 { } 包裹；

Combinations exports (混合匯出)

混合匯出是Named exports和Default exports組合匯出。

混合匯出後，預設匯入一定放在命名匯入前面；

// 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 (別名匯出)

一般情況下，export 匯出的變數名是原檔案中的變數名，但也可以用as關鍵字來指定別名。這樣做是為了簡化或者語義化 export 的函式名。

同一個變數允許使用不同名字輸出多次

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

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

Module Redirects (中轉模組匯出)

為了方便使用模組匯入，在一個父模組中“匯入-匯出”不同模組。簡單來說：建立單個模組，集中多個模組的多個匯出。
使用：使用export from語法實現;

export * from 'lib'; // 沒有設定 export default
export * as myFunc2 from 'myFunc'; // 【ES2021】沒有設定 export default

export{defaultasfunction1, function2 }from'bar.js';

上述例子聯合使用匯入和匯出：

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

儘管此時 export 與 import 等效，但以下語法在語法上無效：

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

正確的做法是重新命名這個匯出：

export{defaultasDefaultExport }from'bar.js';

http://www.bijianshuo.com 軟文發稿平臺

Import

// 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';