JavaScript 模組是包含 JavaScript 程式碼的文件，通常包含函數或類別，這些檔案可以匯入並在其他 JavaScript 檔案中重複使用。
ES Module 主要使用 import 和 export 語法來組織和管理程式碼，在語言層面上引入的模組化機制。

ES6 模組基礎

ES module 就是 JavaScript 的模組化，就是可以把檔案進行拆分做匯入匯出，也就是當程式碼愈寫愈多時，除了最基本切割邏輯到不同檔案，也要有組織與管理程式碼的一套方式，「模組化」可能是最方便的一條道路；ES6 版本新加了 import、export 兩個語法，引入了「模組化」的思維，讓 JavaScript 在開發大型複雜應用程式時，更為方便且易於管理。

匯出 export

1. 具名匯出 namedExport.js：
   可用於匯出已定義的變數、物件、函式，匯出的時候，一定要帶上一個宣告名稱，實戰中比較常使用的是函式匯出。

   // math.js
   export const pi = 3.14159;
   
   export function add(a, b) {
     return a + b;
   }
   
   export class Calculator {
     constructor() {
       this.value = 0;
     }
     add(value) {
       this.value += value;
     }
   }
   

2. 預設匯出 defaultExport.js：
   允許導出一個預設值，通常是一個函數、類別物件，每個模組只能有一個預設匯出。

   // calculator.js
   export default class Calculator {
     constructor() {
       this.value = 0;
     }
     add(value) {
       this.value += value;
     }
   }
   

匯入 import

1. 具名匯入 namedImport.js：
   具名導入允許從一個模組中導入特定的值。

   // main.js
   import { pi, add } from './math.js';
   
   console.log(pi); // 3.14159
   console.log(add(2, 3)); // 5
   

2. 預設匯入 defaultImport.js：

   // main.js
   import Calculator from './calculator.js';
   
   const calc = new Calculator();
   
   calc.add(10);
   
   console.log(calc.value); // 10
   

import、export 整合

1. name

   export function add(x, y) {
     return x + y;
   }
   

   import { add } from 'Your file path here'
   

2. default

   export default function add(x, y) {
     return x + y;
   }
   

   import anyNameHere from 'Your file path here'
   

3. list and rename

   function add(x, y) {
     return x + y;
   }
   
   function multiply(x, y) {
     return x * y;
   }
   
   export { add as sum, multiply as product };
   

   import {
     sum as addition,
     product as multiplication
   } from "Your file path here";
   

4. rename

   function add(x, y) {
     return x + y;
   }
   
   export { add as sum };
   

   import { sum } from 'Your file path here'
   

動態導入

在運行時動態地導入模組，這可以使用 import() 函數引入

// main.js
async function loadModule() {
  const module = await import('./dynamic_module.js');
  module.dynamicFunction();
}

loadModule();

作用域

每個模組有自己的作用域，就算全部在 window 下也會因為作用域是獨立的所以讀不到，所以不會污染全域作用域，只有透過 export 導出的內容才能被其他模組存取。

// math.js
const pi = 3.14;

export const square = x => x * x;

// app.js
import { square } from './math.js';

console.log(square(2));     // 4
// console.log(pi);         // pi is not defined