本系列文章經過重新編排和擴充，已出書為ECMAScript關鍵30天。原始文章因當時準備時程緊迫，多少有些許錯誤。為了避免造成讀者的困擾，以及配合書籍的內容規劃，將會陸續更新本系列文章。
本篇文章在 2021/11/2 已更新。

ES5常用規範

ES2015以前，JavaScript並沒有一致的模組化規範，也沒有內建支援的相關語法。因此在社群中，發展了幾個知名的模組化定義和函式庫。每個規範有自己獨特的語法、程式架構和使用環境。

ES Module（ESM）

目前在各瀏覽器與Node.js的較新版本都有內建相關語法，所以往後的模組化開發，再也不需要使用額外的函示庫才能支援。

匯出－export

主要是由export跟default這兩個關鍵字組成。export後面接匯出的對象，而default是個選擇性的關鍵字，可以把對象設定為預設的匯出。

以下提供幾種匯出模組的方式，可以根據自己的開發習慣，或是模組的使用情境來選擇適合的寫法。

個別設定要匯出的對象

export const magicNumber = 1000;

export function printMsg(msg) {
    console.log('ESM 範例程式: ', msg);
}

export class myClass {}

以物件包覆要匯出對象的名稱

const magicNumber = 1000;

function printMsg(msg) {
    console.log('ESM 範例程式:', msg);
}

class myClass {}

export { magicNumber, printMsg, myClass };

以as關鍵字為對象重新命名

export { magicNumber as myNumber, printMsg as myPrint };

設定預設匯出的對象

export default myClass;
export { magicNumber, printMsg };

匯入－import

由import 跟 from這兩個關鍵字組成。import後面接模組名稱，而from後面接檔案路徑的字串，通常會是相對路徑的寫法。

其中，模組名稱會因為使用情境不同而有多種寫法。

以物件包覆要匯入對象的名稱

import { printMsg, magicNumber } from './myMudle';

console.log('magicNumber:', magicNumber);
printMsg('Hi!'); // ESM 範例程式: Hi!

以as關鍵字為對象重新命名

import {
    printMsg as myPrintMsg,
    magicNumber as myMagicNumber,
} from './myMudle';

const magicNumber = 2000;

console.log('myMagicNumber / magicNumber:', myMagicNumber, '/', magicNumber);
// myMagicNumber / magicNumber: 2000 / 1000
myPrintMsg('Hi!'); // ESM 範例程式: Hi!

以* as關鍵字為模組設定命名空間

import * as MyModule from './myMudle';

console.log('magicNumber:', MyModule.magicNumber);
MyModule.printMsg('Hi!'); // ESM 範例程式: Hi!

// ... 還需要用到 myMudle 裡的其他對象 ...

匯入模組中預設匯出的對象

import myClass, { magicNumber } from './myMudle';

console.log('magicNumber:', magicNumber);
const myObject = myClass();