從框架到 Build：現代前端開發的樣貌

更新日期： 2025 年 4 月 2 日

對許多剛接觸前端開發的初學者來說，第一眼看到的可能是 HTML、CSS 和 JavaScript 三位一體的「靜態網頁三寶」。

但隨著學習深入，你會發現各種名詞如 React、Vue、Sass、Webpack、Vite、Build、Component 等接踵而至，似乎讓前端不再那麼單純。

這篇文章會一步步從框架講起，帶你認識現代前端開發的整體流程與工作內容。

無論你是對「框架和原生語法到底差在哪？」、「什麼是 Build 流程？」、「前端工程師到底每天在做什麼？」感到好奇，這篇文章都將為你打開一扇窗。

一、為什麼會有那麼多前端框架？

原生語法的限制

在早期的前端開發中，我們大多只能依靠 原生的 HTML、CSS 和 JavaScript 來製作網頁。

雖然這些語言本身就能完成大部分的需求，但當開發的網站功能越來越複雜、團隊越來越大時，這種原始的寫法會遇到許多問題，讓開發與維護變得越來越困難。

🚫 重複撰寫相同的結構與樣式

假設你網站中有 20 個長得一樣的「購物車按鈕」，在原生 HTML/CSS 中你可能需要複製貼上 20 次。

一旦某天你想修改這個按鈕的樣式或文字，就得一個個找出來改，容易漏改、出錯，也浪費時間。

🚫 JavaScript 與 HTML 混雜在一起

原生 JavaScript 常常需要直接透過 getElementById() 或 querySelector() 去找 DOM 元素，再針對那些元素加入事件、改變內容。

這種做法在元件很多的情況下，會導致 邏輯與畫面混合在一起，程式碼變得難以閱讀與維護。

🚫 CSS 命名與範圍難以管理

當 CSS 檔案變多、樣式越寫越多時，容易出現樣式覆蓋、命名衝突的問題。

例如某個 .title 樣式套用了整個網站，導致不同區塊的標題都長一樣，或者改了某一區塊的樣式，卻意外影響到其他地方，這就是所謂的「樣式汙染」。

這些原生語法的限制，會讓前端開發在面對大型專案時變得吃力，這也催生了各種框架與工具的誕生。

框架如何幫忙？

為了改善上述的問題，前端社群逐漸發展出許多有組織、可擴充、易維護的工具與框架，讓開發者可以專注在「建構功能與維護元件」上，而不是反覆處理瑣碎、重複的事情。

💡 React / Vue（元件式框架）

這些框架最大的特色就是「元件化」的概念。

你可以將畫面拆成一個個小單位（如按鈕、表單、區塊），每個元件都獨立管理自己的邏輯與樣式。例如：

// React 中的元件
function CartButton() {
  return <button className="btn-cart">加入購物車</button>;
}

一旦寫好元件，就可以在畫面中重複使用，像是 <CartButton />，不需要重複寫 HTML，也不用擔心漏改樣式。

💡 Sass / SCSS（進階 CSS 預處理器）

讓 CSS 更有彈性，例如可以使用變數、巢狀語法、條件判斷與函式等功能。這些在原生 CSS 是做不到的。例如：

$primary-color: #ff6600;

.btn {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

這讓大型網站的樣式可以 更有邏輯結構，也更容易維護。

💡 Tailwind CSS（Utility-first CSS）

Tailwind 直接在 HTML 上用類別控制樣式（像是 bg-blue-500 p-4 text-white），快速開發風格一致的畫面，不需要自己定義一大堆 CSS。

它強調「快速建構 UI、無需命名樣式」，也非常適合搭配元件框架使用。

💡 jQuery（舊世代輔助函式庫）

jQuery 在早期提供簡單好用的 DOM 操作與 AJAX 請求語法，幫助開發者解決瀏覽器相容性問題。

不過隨著瀏覽器標準化與現代框架的興起，jQuery 已漸漸退場，現在的新手比較不會從它開始學習。

為什麼需要框架？

框架與工具的存在，是為了讓前端開發「更快、更穩定、更可維護、更適合團隊合作」。

• 將重複的事情元件化、自動化
• 避免樣式衝突、命名混亂
• 將邏輯與畫面分離，讓程式碼更有架構
• 支援模組化與開發流程管理（如打包、熱重載）

對初學者來說，這些工具一開始看起來可能有點多、有點複雜，但隨著開發經驗增加，你會發現這些框架其實是幫你「省力又省心的好幫手」，是現代前端工程師不可或缺的夥伴。

框架 vs 原生 HTML/CSS/JS 差在哪？

在學習前端開發的初期，我們會先接觸 HTML、CSS 和 JavaScript，這些語言已經足以製作靜態網頁與簡單的互動。

但當你進一步開發動態網站、或開始接觸多人協作專案時，你會漸漸感受到「原生語法的自由」背後，藏著繁瑣與失控的風險。

原生語法：自由但繁瑣

使用原生語法就像在白紙上畫畫，你想怎麼畫都行，不受限制。這在製作小型專案或練習專案時非常棒，因為：

• 你可以快速看到結果
• 沒有額外的學習成本
• 非常直覺（例如 <button>加入購物車</button> 就是一個按鈕）

但問題來了，這樣的「自由」，在專案變大後，會變成「難以維護」的負擔。

舉個例子：

假設你有一個網站，上面有 10 個「加入購物車」按鈕，長得都一樣，但分散在不同頁面或區塊中：

<!-- index.html -->
<button class="cart-btn">加入購物車</button>

<!-- product.html -->
<button class="cart-btn">加入購物車</button>

當你有一天要修改按鈕的文字、改變樣式、加上動畫，或加上一段 JavaScript 邏輯時——你必須一個一個按鈕去修改、測試，費時又容易漏掉。

另外一個常見問題：

在原生開發中，HTML（畫面）與 JavaScript（互動邏輯）是分離的，你需要自己手動「對照兩邊」，這樣的做法可能會讓程式碼散落各地、難以追蹤。

// 原生 JavaScript 操作按鈕
const button = document.querySelector('.cart-btn');
button.addEventListener('click', () => {
  alert('加入成功！');
});

一旦畫面上的按鈕變動，你還要記得更新這段 JavaScript。這種高度耦合的操作方式，容易在修改時出錯或漏改。

框架：抽象與模組化

前端框架（如 React、Vue）則是用來解決上述問題的「現代解法」，核心概念就是「元件化」與「資料驅動畫面」。

✅ 元件化是什麼？

元件（Component）就像是一個個小積木，它們擁有自己的畫面結構、樣式、互動邏輯，而且可以重複使用。

以 React 為例：

// React 中的按鈕元件
function CartButton() {
  return (
    <button className="cart-btn" onClick={() => alert('加入成功！')}>
      加入購物車
    </button>
  );
}

有了這個元件後，你就可以在畫面中重複使用它好幾次：

<CartButton />
<CartButton />
<CartButton />

當哪天要修改樣式、文字或功能時，只要回到 CartButton 這個元件中修改一次，**所有使用到的地方都會一起更新！**這就是框架帶來的維護效率。

✅ 邏輯與畫面不再分離

React、Vue 等框架會鼓勵你將資料邏輯與畫面放在同一個元件中。

這不但讓程式碼更集中，也讓溝通與除錯變得更直觀。

✅ 更容易管理狀態與資料

框架會提供狀態（state）管理的方式，當資料改變時，畫面會自動更新，不需要你手動操作 DOM。

例如使用 React 的 useState()：

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '已按讚' : '按讚'}
    </button>
  );
}

這樣的寫法比原生 JS 操作 DOM 簡潔許多，讓畫面變得可預測，也更好除錯與擴充。

小結：原生 vs 框架

框架不只是「語法糖」，而是「開發思維的轉變」

使用框架不代表原生語法就不重要，反而是建立在原生基礎上的一層進化。

透過元件化與模組化的開發方式，框架幫助我們更高效率、更少錯誤地打造專業的網站或應用程式。

對初學者來說，理解原生語法固然重要，但更重要的是思考：當你開始寫一個有點規模的專案時，你想怎麼管理它？怎麼避免混亂？

這時候，框架會是你非常好的助手與導師。

什麼是 Build？為什麼需要？

在現代前端開發中，我們經常會聽到「Build」這個詞。

初學者可能會好奇：「明明寫好 HTML、CSS、JavaScript 就可以跑出畫面了，為什麼還要什麼 Build？它到底在做什麼？」

這一章會帶你從開發語法和瀏覽器之間的落差講起，解釋為什麼需要 Build 工具，並介紹它實際處理了哪些事情。

開發過程與瀏覽器理解的差距

隨著前端技術的演進，我們不再只用最原始的 HTML、CSS、JS 來開發，取而代之的是更多強大又方便的工具與語法。

例如：

• JSX：React 中一種將 JavaScript 與 HTML 混寫的語法
• TypeScript（TS）：JavaScript 的超集合，提供靜態型別與更嚴謹的開發體驗
• SCSS / Sass：CSS 的進階版本，支援變數、巢狀結構、函式等
• ES6+ 語法：如 let, const, 箭頭函式、模組匯入等

🔍 但問題來了：

👉 這些語法和技術，瀏覽器本身其實看不懂！

大多數瀏覽器只支援：

• 標準的 HTML
• 純 CSS
• ES5（舊版 JavaScript）

也就是說，開發階段使用的程式碼，其實不能直接上傳伺服器讓瀏覽器執行。你需要一個「翻譯員」來幫你將這些進階語法轉換成瀏覽器能理解的格式。

這個翻譯員，就是「Build 工具」。

Build 是做什麼的？

所謂的「Build」，指的是將開發中的原始碼（通常包含進階語法、模組化結構等）轉譯、整理、壓縮、打包成可部署的網站版本的整個過程。

常見的 Build 工具有：

• Webpack
• Vite（現今主流之一，速度快）
• Parcel
• 其他像是 Rollup、Snowpack 等

✅ Build 工具的主要任務：

1. 語法轉譯（Transpile）

將開發時使用的「進階語法」轉換成「瀏覽器能理解的基本語法」。

例如：

// TypeScript 原始碼
const message: string = 'Hello';

會被轉換為：

// 編譯後 JavaScript
var message = 'Hello';

2. 模組打包（Bundling）

現代開發會將功能拆成許多小檔案（模組），這樣有利於維護。

但瀏覽器無法直接讀取模組的關聯，因此 Build 工具會將所有模組整理成一份或數份可執行的檔案（如 bundle.js），並自動安排模組執行順序。

// 原本檔案結構
/components/Button.js
/utils/helper.js
/pages/Home.js

// Build 後
/dist/bundle.js （所有程式碼整合在一起）

3. 效能優化（Optimization）

Build 工具還會自動執行一系列效能優化操作：

• 壓縮（Minify）：移除空白、註解、縮短變數名稱，減少檔案大小
• Tree Shaking：移除沒有被使用到的程式碼
• Code Splitting：將程式碼拆成多個部分，只在需要時載入（提升載入速度）
• Cache Busting：產生帶有哈希值的檔名（例如 bundle.87sda9.js），避免使用者載入舊的快取檔案

4. 支援開發流程（開發者友善）

Build 工具通常內建開發伺服器與熱重載功能，讓你在開發時可以即時看到變更效果，提升開發效率：

• Hot Reload / HMR（Hot Module Replacement）：修改程式碼後，瀏覽器自動刷新畫面或熱替換模組，無需手動重新整理
• 自動偵測檔案變更並重新編譯
• 支援開發與正式環境的切換（Dev vs Prod）

小結：為什麼需要 Build？

建立現代前端的「翻譯 + 管理 + 最佳化」流程

如果你想使用現代前端技術（如 React、TypeScript、SCSS），Build 是不可或缺的橋梁。它不只是幫你轉譯程式碼，還會：

• 整理、壓縮、打包程式碼
• 提升效能與載入速度
• 讓開發流程更流暢與專業
• 幫你準備好可以直接上線的版本

就像廚師需要「食材處理」到適合上桌一樣，Build 工具就是幫前端程式碼「清洗、切好、煮熟、擺盤」的一站式料理流程。

結語：前端不只是做出漂亮畫面，而是一個完整的開發流程

從原始碼撰寫到畫面呈現，再到 Build 打包與部署，前端開發是一個系統性很強的流程。

透過框架，我們能更有效率地管理專案；透過 Build 工具，我們能將開發成果轉化為瀏覽器可讀的形式。

前端不再只是「畫畫畫」的工作，而是一個融合設計美感與工程邏輯的專業領域。

希望這篇文章能讓你對現代前端開發有更清晰的理解與方向！