使用 Vite 和 Bun 建置前端

Vite 無需額外設定即可與 Bun 一起使用。使用 Vite 的模板之一開始。

terminal

bun create vite my-app

Text

◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Which linter to use?
│  Oxlint
│
◇  Install with bun and start now?
│  No
│
◇  Scaffolding project in /path/to/my-app...

然後進入專案目錄並安裝相依。

terminal

cd my-app
bun install

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

--bun 標誌會告訴 Bun 使用 bun 而不是 node 來執行 Vite 的 CLI。預設情況下，Bun 會遵循 Vite 的 #!/usr/bin/env node shebang 行。

terminal

bunx --bun vite

為了簡化此命令，將 package.json 中的 "dev" 指令碼更新為以下內容。

package.json

  "scripts": {
    "dev": "vite", // [!code --]
    "dev": "bunx --bun vite", // [!code ++]
    "build": "tsc -b && vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  // ...

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

terminal

bun run dev

為生產環境建置應用。

terminal

bunx --bun vite build

如需瞭解更多資訊，請參閱 Vite 文件。