JavaScript 生態全景：語言、執行環境、框架

目錄

• 為什麼要先搞懂分層
• 三層心智模型
• 語言層
• 執行環境層（Runtime）
• 框架與函式庫層
• 周邊工具
• 典型技術棧範例
• 常見混淆釐清
• 怎麼看待一個新名詞
• 常見問題
• 總結

為什麼要先搞懂分層

JS/前端生態名詞爆炸——JavaScript、TypeScript、Node.js、React、Next.js、Vite、Deno、Bun…初學最大的困惑不是某個工具難，而是搞不清楚這些是不是同一類東西。

把它們分層後就清楚了：它們屬於不同層次、各司其職，彼此組合而非互斥。

三層心智模型

關鍵：這三層是正交（互不衝突）的選擇。例如「用 TypeScript（語言）寫一個 Next.js（框架）應用，跑在 Node.js（執行環境）上」——三個不同層各選一個，組合起來。

語言層

你實際寫的程式語言。

寫 .ts ──tsc / 建置工具編譯──► .js ──► 交給執行環境跑

• 其他「編譯成 JS」的語言（較小眾）：ReScript、Elm、PureScript、Dart（早期）等——它們最終也產出 JS 在瀏覽器/Node 執行
• 實務上 99% 是 JS 或 TS；新專案多選 TS

TypeScript 深入見 TypeScript 型別系統基礎。

執行環境層（Runtime）

「程式在哪裡跑」。Runtime 不是語言，是執行 JS 的環境，提供 JS 本身沒有的能力（讀檔、開伺服器、操作 DOM 等）。

瀏覽器

• 內建 JS 引擎：Chrome/Edge/Node 用 V8、Firefox 用 SpiderMonkey、Safari 用 JavaScriptCore
• 提供 DOM、fetch、localStorage 等瀏覽器 API
• 跑前端程式碼

伺服器端 Runtime

同一份 JS/TS 程式碼，可能跑在瀏覽器，也可能跑在 Node——但能用的 API 不同（瀏覽器有 DOM、Node 有檔案系統）。Node.js 維運見 systemctl 服務管理。

框架與函式庫層

「拿什麼工具蓋東西」。這層最熱鬧，再細分幾類：

前端 UI 函式庫 / 框架

全端 / Meta 框架（建在 UI 框架之上）

後端框架（跑在 Node/Deno/Bun）

React 見 React 完全指南、Next.js 見 Next.js 系列。

周邊工具

開發流程還會用到這些（同樣不是語言/框架，是工具）：

用 React/Next 開發時，建置工具會自動處理 TS 編譯與打包，你通常不必手動跑 tsc。

典型技術棧範例

把各層各選一個，就組成一個專案的技術棧：

語言：      TypeScript
執行環境：  Node.js（伺服器）+ 瀏覽器（前端）
框架：      Next.js（React 全端）
資料庫：    PostgreSQL（透過 Supabase）
建置：      Next.js 內建（底層用 SWC/Turbopack）
套件管理：  pnpm
部署：      Vercel

這正是很多現代專案的樣子——每一層都是一個獨立選擇，換掉其中一層不影響其他層的概念。

常見混淆釐清

最常見的誤解：「Node.js / Next.js 是不是 TypeScript？」——都不是。它們屬於不同層，但都能用 TypeScript 來寫。

怎麼看待一個新名詞

遇到沒聽過的 JS 生態名詞時，先問它在哪一層：

它是「拿來寫程式的語法」嗎？        → 語言層（少見，多半還是 JS/TS）
它是「執行 JS 的環境」嗎？          → 執行環境層（runtime）
它是「拿來蓋應用的工具/函式庫」嗎？ → 框架/函式庫層
它是「開發流程的輔助」嗎？          → 周邊工具（打包/套件管理/編譯）

分對層，就知道它跟你已知的東西是互補還是替代關係。

常見問題

問題 1：Node.js 是程式語言嗎？

不是。Node.js 是執行環境（runtime），讓 JavaScript 能在瀏覽器外（伺服器、CLI）執行。語言仍是 JS/TS。

問題 2：React 和 Next.js 差在哪？

React 是UI 函式庫（負責畫面元件）；Next.js 是建在 React 之上的全端框架（多了路由、SSR、API、建置）。Next.js 用 React，但補上了蓋完整網站需要的東西。

問題 3：用 TypeScript 一定要 Node.js 嗎？

不一定。TS 是語言，可用於前端（編譯後在瀏覽器跑）或後端（在 Node/Deno/Bun 跑）。Node.js 只是其中一種執行環境。

問題 4：Deno、Bun 會取代 Node.js 嗎？

它們是 Node 的替代執行環境，各有優勢（Deno 原生 TS/安全、Bun 高速）。Node 生態最成熟、仍是主流；三者短期共存，視專案需求選擇。

問題 5：這麼多框架要全學嗎？

不用。同一層的選項多是替代關係（React vs Vue、Next vs Nuxt），通常深入一套主流即可（如 React + Next.js）。理解分層後，換框架的學習成本會低很多。

總結

核心要點

• JS 生態分三層：語言（JS/TS）、執行環境（瀏覽器/Node/Deno/Bun）、框架函式庫（React/Vue/Next…）
• 三層是正交選擇，組合使用：例如「TS + Next.js + Node.js」
• TypeScript = 語言、Node.js = 執行環境、Next.js/React = 框架/函式庫——不同層、可搭配
• 周邊還有套件管理（npm/pnpm）、建置打包（Vite/webpack）、編譯（tsc/SWC）
• 遇到新名詞先問「它在哪一層」，就知道是互補還是替代

快速參考

建立日期：2026-06-18