JavaScript 的 ESM 模組操作(import, export)

什麼是 ESM

在 JavaScript 中，ESM（ECMAScript Modules）是官方標準的模組系統，旨在提供一種在不同檔案或模組之間共享功能的方法。自 ES6（ECMAScript 2015）以來，JavaScript 提供了原生的 import 和 export 語句用於處理模組匯入和匯出。這些特性被廣泛用於現代前端開發框架和工具中，如 React、Angular、Vue.js，以及 Node.js

export

export 語法用於將代碼（如函式、class、變數或常數等）從一個檔案匯出，使得其他檔案可以通過 import 語法來使用這些程式碼。export 有兩種主要形式：命名匯出（Named Exports）和預設匯出（Default Exports）。

命名匯出

你可以從模組中匯出多個值，每個都有自己的名字。其他檔案匯入時可以指定需要的匯出名稱。

例如：

// file: mathFunctions.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 或者在最後統一匯出
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
export { multiply, divide };

預設匯出

每個模組可以有一個預設匯出。預設匯出的匯入時不需要知道匯出的名字。

export default { //file: MyComponent.js
	string : 'hello',
	array : [1,2,3],
	fn() {
    	console.log('default')
	}
}

import

import 語句用於將其他檔案或模組的 export 匯入到當前檔案中。根據匯出類型，匯入的方式也有所不同。

匯入命名匯出

注意要匯入匯出的模組時，script 的標籤要加上 type="module"

// 匯入具體的命名匯出
import { add, subtract } from './mathFunctions.js';
console.log(add(1, 2));

// 匯入所有命名匯出為一個對象
import * as math from './mathFunctions.js';
console.log(math.add(1, 2)); // 輸出: 3

匯入預設匯出

import app from './MyComponent.js';
console.log(app.str) // hello
console.log(app.array) // [1,2,3]
app.fn() // default

動態匯入

JavaScript 也支援動態匯入，這允許你根據需要在程式碼運行時匯入模組。這是通過 import() 函式實現的，它會回傳一個 Promise。

比如我有一個 myModule.js，內容是：

export function greet() {
    console.log("Hello from myModule!");
}
 

// 動態匯入模組
import('./myModule.js')
  .then((module) => {
    module.greet();
  })
  .catch(err => console.error('Module loading failed: ' + err));

動態匯入的用途

1. 滿足特定條件載入模組：當特定條件滿足時才加載模組。
2. 程式碼拆分：減少初始載入時間，將不常用的功能延遲載入。
3. 條件性模組：根據執行時的條件決定載入哪個模組。

ESM 提供了一個強大且靈活的系統來組織和重用 JavaScript 程式碼，尤其適合大型專案和現代前端框架。它支援靜態和動態匯入，使得程式碼分割和lazyload成為可能，有助於提高應用的性能和維護性。