JavaScript 模組匯出教學：export 與 export default 的用法與差異

在現代 JavaScript 開發中，「模組化」是管理程式碼結構的基本能力。

它允許我們把函式或變數寫在一個檔案中，然後在其他檔案中匯入使用，讓程式碼更有組織、可維護、可重用。

JavaScript 提供兩種匯出方式：

• export
• export default

這篇文章將帶你深入了解這兩種匯出方式的語法、匯入方法與差異，幫助你在實務開發中選擇最合適的用法。

什麼是 export？它的角色是什麼？

export 是 JavaScript 中用來「對外公開」模組內部變數或函式的語法。

你可以：

• 匯出一個或多個變數、函式、類別
• 從其他檔案使用 import 將它們引入

這種導出方式又叫 具名匯出（Named Export），因為你是根據名稱來匯出與匯入。

常見的 export 寫法有哪些？

宣告式匯出（Declaration Export）

在變數或函式定義時直接加上 export：

// a.js
export const name = '答案cp3';

export function sayHi() {
  console.log('Hi!');
}

這種方式簡單明確，適合匯出個別功能。

集中式匯出（Grouped Export）

先定義好所有變數與函式，最後再用大括號集中匯出：

// a.js
const name = '答案cp3';

function sayHi() {
  console.log('Hi!');
}

export { name, sayHi };

這種方式便於統一管理，適合模組中有多個要匯出的項目。

如何使用 import 匯入 export 的內容？

若使用的是 export 匯出，對應的匯入語法需使用大括號：

// b.js
import { name, sayHi } from './a.js';

⚠️ 注意：名稱必須一模一樣，不能改名，否則會報錯。

錯誤範例：

import { Name } from './a.js'; // ❌ Name !== name

常見錯誤：為什麼 export name 或 export fn 會報錯？

讓我們看看下面這段常見錯誤範例：

var name = '答案cp3';
export name; // ❌

function fn() {
  console.log(this);
}
export fn; // ❌

你可能會想：「變數和函式都定義好了，為什麼不能匯出？」

錯誤背後的語法原理

JavaScript 中的 export 是一個語法結構（syntax keyword），而不是函式，它不能像 console.log(name) 一樣用函式語法那樣寫成 export name。

這句話是語法錯誤，會拋出：

SyntaxError: Unexpected token 'name'

因為 JavaScript 看到 export name;，會想：「你想要匯出什麼？這不是一個完整語法結構！」。

那正確要怎麼寫？

當你想要匯出一個已經定義的變數或函式，有兩種正確的寫法：

✔️ 方法一：定義時就直接匯出

export const name = '答案cp3';

export function fn() {
  console.log(this);
}

這是宣告與匯出寫在一起的方式，語法簡潔直觀。

✔️ 方法二：先定義，再集中匯出

const name = '答案cp3';

function fn() {
  console.log(this);
}

export { name, fn };

這種寫法彈性更高，適合大型模組或團隊協作時使用。

export 是建立模組連結的橋樑

一個 .js 檔案在有 export 或 import 語法時，會自動被視為一個模組（module），這與傳統 script 標籤執行的方式不同，擁有自己的模組作用域（module scope）。

換句話說，當你使用 export，就等於是在說：「這個檔案是一個模組，它要提供某些功能讓外部使用。」

非常好，你已經有了清楚的 export 概念，接下來這段我會幫你完整撰寫 export default 的介紹章節，包含語法說明、使用案例、底層原理、匯入方式比較、常見錯誤，以及與 export 的關係。目的是讓初學者能真正理解它與 export 的差異與實務使用方式。

什麼是 export default？

export default 是 JavaScript 中的預設匯出語法，用來指定一個模組的主要匯出內容。

每個模組（即一個 .js 或 .mjs 檔案）最多只能有一個 export default，因此你可以把它當作這個模組的「主角」、「預設功能」。

常見使用情境：

• 匯出一個主要的函式或物件，例如：API 函式、React 元件、設定物件等。
• 匯出值本身，而不是變數名稱。

✅ 語法範例一：預設匯出函式

// a.js
function c() {
  return 456;
}

export default c;

在其他檔案中匯入：

// b.js
import c from './a.js';

這裡的 c 是匯入時自取的名字，與 a.js 中函式的名稱無關。

✅ 語法範例二：匯出變數值

// a.mjs
var name = '答案cp3';
export default name;

在匯入時：

import anyName from './a.mjs';
console.log(anyName); // 印出 "答案cp3"

✅ anyName 可以取任何名稱，這是 export default 與 export 最大的差異之一：匯入時不需用大括號，也不需對應原始名稱。

原理解說：為什麼 export default 可以匯出變數值？

export default 的本質是：

export { something as default }

也就是說你是把一個值（可以是函式、變數、物件）作為模組的預設匯出，它是作為一個名稱為 default 的成員被匯出的。

例如：

// 這兩者等價
export default name;
// 等價於
export { name as default };

匯入時：

// 這兩者也等價
import anyName from './a.mjs';
// 等價於
import { default as anyName } from './a.mjs';

常見錯誤解析：為什麼不能寫 export default var？

錯誤示範

export default var name = '答案cp3'; // ❌ SyntaxError

這種寫法會直接報語法錯誤，因為它違反了 JavaScript 的語法結構規範。

❓為什麼這樣會錯？

在 JavaScript 中，export default 只能搭配一個「值」或「完整語法結構」。

但是 var name = ... 是一種宣告語句（declaration statement），而不是一個可以立即當作「值」處理的表達式（expression）。

也就是說：

export default <值或完整結構> // ✅ 正確
export default var xxx        // ❌ 不合法語法結構

這與 export const ... 的情境不一樣，因為 const、let、var 都是需要一整行「宣告句」包裝的語法，而不是能當作 default 的單一「值」。

正確寫法有哪些？

✔️ 方法一：先宣告，再用 export default 匯出變數

var name = '答案cp3';
export default name;

你可以理解成：

「先定義一個東西，再把它當作預設匯出」

✔️ 方法二：直接匯出值

export default '答案cp3';       // ✅ 直接匯出字串
export default 123;             // ✅ 直接匯出數字
export default [1, 2, 3];        // ✅ 匯出陣列
export default { a: 1, b: 2 };   // ✅ 匯出物件

✔️ 方法三：匯出匿名函式（常見用法）

export default function () {
  console.log('hi');
}

這是一種很常見的寫法，尤其在匯出模組主邏輯（像 React Component）時會出現。

✅ 不需要給函式命名，也不會污染作用域。

✔️ 方法四：匯出具名函式（也合法）

export default function c() {
  return 456;
}

這種寫法會建立一個命名函式 c，即使是 default 匯出，也可以在函式體內使用自己的名稱。

✅ 記得：即使匯出的是 c，匯入時仍然可以使用任意名稱。

// b.js
import anything from './a.js'; // ✅ 匯入名稱可以任意命名

✔️ 方法五：匯出物件（很常見）

export default {
  name: '答案cp3',
  greet() {
    console.log('Hello');
  }
};

這種方式常見於：

• 匯出一個設定檔
• 匯出一組函式（例如工具模組）
• 匯出一個 API 封裝

⚠️ 這種物件內部不會自動轉成多個 named export，它仍然是單一 default export。

export default 特性總結

匯入方式比較：export vs export default

在前面我們已經分別介紹了 export（具名匯出）和 export default（預設匯出）的用法，現在讓我們從「匯入角度」來比較這兩種匯出方式的差異。

🔍 解釋：

• 使用 export 匯出的變數、函式名稱是固定的，匯入時必須完全一致（含大小寫），否則會報錯。
• 使用 export default 匯出的內容是一個預設值，匯入時你可以自由命名，因為 JavaScript 會知道你匯入的是那個預設值。

範例：

// a.js
export const site = 'tkb';
export default function start() {
  console.log('app started');
}

// b.js
import startApp, { site } from './a.js';

console.log(site);      // 'tkb'
startApp();             // 'app started'

使用建議：何時用 export？何時用 export default？

選擇使用哪一種匯出方式，取決於模組的設計目的與你希望如何被匯入。以下提供幾種常見情境與建議對應方式：

進階應用：可以同時使用 export 和 export default 嗎？

✅ 當然可以！

一個模組中可以同時使用 export 和 export default，這種做法常見於一些大型函式庫或元件庫，例如一個主功能是函式，但模組內也提供其他工具函式、常數等等。

範例：同時使用 export 和 export default

// a.js
export const PI = 3.14159;
export function add(x, y) {
  return x + y;
}
export default function main() {
  console.log("這是模組的主功能");
}

匯入方式

// b.js
import mainFunction, { PI, add } from './a.js';

mainFunction();     // 呼叫 default 匯出的主功能
console.log(PI);    // 使用具名匯出
console.log(add(2, 3));

✅ 小技巧補充

• default 匯入放最前面，具名匯入放在大括號中。
• 匯入時可以選擇只匯入 default，或只匯入具名成員，視情況彈性處理。

結語：理解 export 與 export default，打造模組化思維的第一步

透過本篇文章，你已經學會了 JavaScript 模組系統中最核心的兩種匯出方式：

• export（具名匯出）：適合匯出多個功能，讓使用者按需選用。
• export default（預設匯出）：用於匯出單一主要功能，匯入時更簡潔、名稱更自由。

你也了解了它們的語法差異、匯入方式、常見錯誤（如 export default var）、以及如何在同一模組中混合使用兩種匯出方式。這些知識不僅幫助你撰寫更清晰的程式碼，更讓你能與現代前端框架（如 React、Vue）或模組化架構無縫接軌。

✅ 模組化開發的關鍵優勢包括：

• 封裝：讓每個檔案只專注一件事，減少命名衝突。
• 重用：相同邏輯可以跨多個專案或模組使用。
• 可維護性：出錯容易追蹤，新增功能不易破壞其他模組。
• 團隊協作：多人開發時，介面明確、結構清楚。

下一步建議學習方向：

如果你已經理解 export / export default 的基本用法，接下來你可以：

• 學習如何使用 index.js 統整整個資料夾的模組匯出（模組入口設計）。
• 探索打包工具（如 Vite、Webpack）如何處理 ES Module。
• 深入了解 ESModule 與 CommonJS (require / module.exports) 的差異與轉換方式。
• 在實戰中觀察各大套件如何設計他們的匯出策略（例如 React 如何搭配 default 與 named）。

💡 最後提醒：模組匯出是 JavaScript 中非常基礎卻非常重要的一塊拼圖，當你能靈活掌握它，就等於打開了寫出可讀、可維護、可擴展程式碼的大門。

讓我們從寫好每一個 export 開始，讓你的專案變得更清晰、更專業！💪