使用 Vite 和 Bun 構建前端

NOTE

你可以在 Bun 中使用 Vite，但許多項目通過切換到 [HTML 導入](/zh-cn/bundler/html-static) 獲得更快的構建速度並減少數百個依賴。

Vite 開箱即支持 Bun。使用 Vite 的模板之一開始。

bash

bun create vite my-app

txt

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /path/to/my-app...

然後 cd 進入項目目錄並安裝依賴。

bash

cd my-app
bun install

使用 bunx 和 vite CLI 啟動開發服務器。

--bun 標志告訴 Bun 使用 bun 而不是 node 運行 Vite 的 CLI；默認情況下 Bun 遵循 Vite 的 #!/usr/bin/env node shebang 行。

bash

bunx --bun vite

要簡化此命令，將 package.json 中的 "dev" 腳本更新為以下內容。

json

  "scripts": {
    "dev": "vite", 
    "dev": "bunx --bun vite", 
    "build": "vite build",
    "serve": "vite preview"
  },
  // ...

現在你可以使用 bun run dev 啟動開發服務器。

bash

bun run dev

以下命令將為生產構建你的應用。

bunx --bun vite build

這是一個簡化指南，幫助你開始使用 Vite + Bun。有關更多信息，請參閱 Vite 文檔。