使用 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 文档。