當程式碼開始變長、檔案開始變多、找一個功能卻要上下滾半天，
這時候「模組化」就很重要了！

一、export / import 是在做什麼？

ES Modules 的核心只有兩個動作
export：把東西「丟出去」
import：把別人丟出的東西「拿進來用」

例子
math.js

export const add = (a, b) => a + b;

main.js

import { add } from "./math.js";
console.log(add(2, 3)); // 5

可以把 math.js 想成一個「工具箱」，main.js 只拿它需要的工具

二、具名輸出（Named Export）

具名輸出是：每個東西都有名字，拿的時候名字要對得上。
utils.js

export const formatDate = () => {};
export const formatPrice = () => {};

import { formatDate, formatPrice } from "./utils.js";

特點：
可以輸出很多個
import 時必須用 {} 包起來
名字錯就直接報錯

三、預設輸出（Default Export）

預設輸出是：這個檔案「主要只想給你一個東西」

logger.js

export default function log(msg) {
  console.log(msg);
}

import log from "./logger.js";

特點：
import時不用{}
你可以自己幫它取名字

什麼時候適合 default export？
一個檔案 = 一個主要功能

四、預設輸出 vs 具名輸出，怎麼選？

多個工具 → 具名輸出
單一主角色 → 預設輸出

五、相對路徑與絕對路徑

相對路徑

import { add } from "./math.js";
import Header from "../components/Header.js";

./：同一層
../：上一層
ES Modules 一定要寫副檔名 .js

絕對路徑（通常在框架或設定後）

import Header from "@/components/Header";

這不是 JavaScript 原生功能，而是：
bundler（Vite / Webpack）
framework（Vue / React / Next）
設定的別名，之後學框架會再遇到喔！