1.什麼是模組？

前面我們學了許多JavaScript的基礎語法，也開始有寫出一些規模的程式，但隨著功能越來越多，就會發現所有程式都塞在同一個檔案裡，實在太亂了
所以JavaScript在ES6引入了一個重要的功能之一，那就是模組系統
它讓我們能把程式分拆成多個檔案，彼此協作，維持整潔又好維護的結構

在早期，我們只能用 <script> 標籤一個一個引入 JS 檔，但這樣做有幾個問題：
1.全域變數污染：不同檔案中的變數可能互相覆蓋
2.依賴順序麻煩：你必須保證某個檔案在另一個之前載入
3.難以維護：專案大一點就會一團亂

為了解決這些問題，ES6 正式引入了模組系統，讓每個檔案都能獨立作用，只匯出自己想給別人用的內容

在ES6中，每個JavaScript檔案都可以被視為一個模組，模組內的變數、函式、物件預設不會外洩到全域，只有明確「匯出」的內容，才能被其他檔案「匯入」使用

2.、export

假設我們有一個檔案math.js，裡面放了一些數學函式
範例：

//math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

在這裡，我們使用export關鍵字，把常數和函式匯出，這樣其他檔案就能使用它們了

3.import

然後在另一個檔案中使用import匯入
範例：

//main.js
import { PI, add, multiply } from "./math.js";

console.log(PI); //3.14159
console.log(add(2, 3)); //5
console.log(multiply(4, 5)); //20

注意使用{}括號指定要匯入的名稱，名稱必須與export時的名稱一致

4.匯出整個模組

有時候一個模組只會匯出一個主要功能，這時我們可以使用預設匯出
範例：

//greeting.js
export default function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

//main.js
import sayHello from "./greeting.js";

sayHello("小明"); // Hello, 小明!

這樣使用時就不用加{}，但要注意一個檔案只能有一個export default，不過可以同時有多個一般的export

5.重新命名匯入與匯出

你可以在匯出或匯入時重新命名，避免名稱衝突：

//math.js
export { add as plus, multiply as times };

//main.js
import { plus, times } from "./math.js";

6.匯入整個模組

若要一次匯入模組中的所有東西，可以使用 * as 語法
範例：

import * as math from "./math.js";

console.log(math.PI);
console.log(math.add(2, 3));

這樣 math 就會是一個物件，裡面包含所有匯出的成員

7.在瀏覽器中使用模組

要在瀏覽器中使用ES6模組，需要在<script>標籤中加上type="module"
範例：

<script type="module" src="main.js"></script>

注意：

• 檔案路徑必須是相對路徑（例如 ./math.js）
• 若使用本機檔案開啟，可能會有CORS問題，建議用本地伺服器（如VSCode的Live Server）