初級 免費 ⏱ 20:00
12-2 極速工作流：Bun 與 Vite 的開發實踐
掌握當代最強建置組合。深入學習 Bun 的執行效率與 Vite 的開發體驗，並理解為何現代開發不再需要 Webpack。
12-2 極速工作流：Bun 與 Vite 的開發實踐
👋 **老師的話 (Script)**:
"以前我們啟動一個專案要等 30 秒。
在 2026 年，我們要求點下按鈕的『瞬間』，環境就要架好。
這就是為什麼我們選用了 Bun 這款全能 Runtime， 加上 Vite 這款地表最強開發伺服器。 這套組合會讓你感覺不是在『開發』，而是在『創作』。“
1. Vite 的魔法：No-Bundle
傳統工具 (如 Webpack) 會先把所有 JS 檔案打包成一大包才跑。 Vite 不打包。它直接利用瀏覽器的 ESM 支援，要用哪個檔案才傳哪個。 這就是為什麼它啟動速度是毫秒級的。
2. Bun 的現代化替代
- 代替 npm/yarn：
bun install快了 10~100 倍。 - 代替 node：
bun index.ts直接執行 TypeScript。 - 代替 Jest：
bun test內建超快測試器。
3. 專案配置最佳實務 (astro.config.mjs 範例)
在本專案中，我們使用的是 Astro，它底層就是 Vite。
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
// Vite 配置隱藏在這裡面
});
🧪 Lab 29: 熱重載 (HMR) 體驗
啟動你的
npm run dev，試著修改 CSS 裡的一個顏色。
觀察瀏覽器，你會發現它沒有重新整理網頁，但顏色變了。
這就是 HMR (Hot Module Replacement)。