ES 模組語法

• 匯入
  • 命名匯入
  • 命名空間匯入
  • 預設匯入
  • 空匯入
  • 動態匯入
• 匯出
  • 命名匯出
  • 預設匯出
• 繫結運作方式

以下內容旨在作為 ES2015 規格 中定義的模組行為的輕量級參考，因為正確理解 import 和 export 陳述對於成功使用 Rollup 至關重要。

匯入

匯入的值無法重新指定，儘管匯入的物件和陣列可以變異（而且匯出模組和任何其他匯入者都會受到變異的影響）。在這種方式下，它們的行為類似於 const 宣告。

命名匯入

從來源模組匯入特定項目，並使用其原始名稱。

import { something } from './module.js';

從來源模組匯入特定項目，並在匯入時指定自訂名稱。

import { something as somethingElse } from './module.js';

命名空間匯入

將來源模組中的所有內容匯入為物件，並將來源模組的所有命名匯出公開為屬性和方法。

import * as module from './module.js';

上述的 something 範例會附加到匯入的物件中成為屬性，例如 module.something。如果存在預設匯出，則可透過 module.default 存取。

預設匯入

匯入來源模組的預設匯出。

import something from './module.js';

空匯入

載入模組程式碼，但不要提供任何新物件。

import './module.js';

這對於多重載入或匯入程式碼的主要目的是修改原型時很有用。

動態匯入

使用 動態匯入 API 匯入模組。

import('./modules.js').then(({ default: DefaultExport, NamedExport }) => {
	// do something with modules.
});

這對於程式碼拆分應用程式和動態使用模組很有用。

匯出

命名匯出

匯出先前已宣告的值

const something = true;
export { something };

在匯出時重新命名

export { something as somethingElse };

在宣告時立即匯出值

// this works with `var`, `let`, `const`, `class`, and `function`
export const something = true;

預設匯出

將單一值匯出為來源模組的預設匯出

export default something;

僅當來源模組只有一個匯出時，才建議採用此做法。

在同一個模組中混合預設和命名匯出是一種不良做法，儘管規範允許這麼做。

繫結運作方式

ES 模組匯出動態繫結，而非值，因此值可以在最初匯入後根據 此示範 進行變更

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