bun create

使用 bun create 建立新的 Bun 專案。它可以從 React 元件、create-<template> npm 包、GitHub 儲存庫或本地模板建立專案。

要建立空專案，請使用 bun init。

從 React 元件建立

bun create ./MyComponent.tsx 會將已有的 React 元件轉變成一個包含熱過載和生產建置的一體化開發環境。

bun create ./MyComponent.jsx # 同時支援 .tsx

工作原理

當你執行 bun create <component> 時，Bun 會：

1. 使用 Bun 的 JavaScript 打包器 分析你的模組圖。
2. 收集執行該元件所需的所有相依。
3. 掃描入口點匯出中是否存在 React 元件。
4. 生成包含所需相依和指令碼的 package.json 檔案，用來執行該元件。
5. 使用 bun install --only-missing 安裝缺失的相依。
6. 生成以下檔案：
   • ${component}.html
   • ${component}.client.tsx (前端入口點)
   • ${component}.css
7. 啟動前端開發伺服器。

在 Bun 中使用 TailwindCSS

TailwindCSS 是一個用於為 Web 應用程式設定樣式的實用優先 CSS 框架。

當你執行 bun create <component> 時，Bun 會掃描你的 JSX/TSX 檔案（以及它匯入的任何檔案）中的 TailwindCSS 類名。如果 Bun 檢測到 TailwindCSS 類名，它會將以下相依新增到你的 package.json 中：

{
  "dependencies": {
    "tailwindcss": "^4",
    "bun-plugin-tailwind": "latest"
  }
}

Bun 還會設定 bunfig.toml，以便通過 Bun.serve() 使用其 TailwindCSS 外掛：

[serve.static]
plugins = ["bun-plugin-tailwind"]

Bun 還會寫入一個 ${component}.css 檔案，並在檔案頂部新增 @import "tailwindcss";：

@import "tailwindcss";

在 Bun 中使用 shadcn/ui

shadcn/ui 是一個用於建置 Web 應用程式的元件庫工具。

bun create <component> 會掃描是否有任何從 @/components/ui 匯入的 shadcn/ui 元件。

如果找到，它會執行：

# 假設 bun 檢測到匯入了 @/components/ui/accordion 和 @/components/ui/button
bunx shadcn@canary add accordion button # 以及其他元件

由於 shadcn/ui 本身使用 TailwindCSS，bun create 還會將 TailwindCSS 相依新增到你的 package.json 中，並設定 bunfig.toml，以便通過 Bun.serve() 使用 Bun 的 TailwindCSS 外掛，如前文所述。

bun create 還會設定：

• tsconfig.json，將 "@/*" 別名指向 "src/*" 或 .（具體取決於是否存在 src/ 目錄）
• components.json，以便 shadcn/ui 知道這是一個 shadcn/ui 專案
• styles/globals.css 檔案，按照 shadcn/ui 的預期設定 Tailwind v4
• ${component}.build.ts 檔案，該檔案使用設定了 bun-plugin-tailwind 的方式為生產環境建置元件

使用 bun create ./MyComponent.jsx 可以在本地執行由 Claude 或 ChatGPT 等 LLM 生成的程式碼。

從 npm 建立

bun create <template> [<destination>]

如果你沒有名稱相同的本地模板，此命令會從 npm 下載並執行 create-<template> 包。以下兩個命令是等效的：

bun create remix
bunx create-remix

有關使用說明，請參閱 create-<template> 包的文件。對於 react 和 next，Bun 不會執行任何包；它只會列印一條訊息，指向 react-app/vite 和 next-app。

從 GitHub 建立

bun create <user>/<repo> 會將 GitHub 儲存庫的內容下載到磁碟。

bun create <user>/<repo>
bun create github.com/<user>/<repo>

可以選擇為目標資料夾指定名稱。如果不指定，Bun 將使用儲存庫名稱。

bun create <user>/<repo> mydir
bun create github.com/<user>/<repo> mydir

然後，Bun 會：

• 下載模板
• 將所有模板檔案複製到目標資料夾
• 使用 bun install 安裝相依
• 初始化一個全新的 Git 儲存庫。使用 --no-git 標誌可選擇退出。

從本地模板建立

你可以在本地檔案系統上定義自定義模板。將它們放在以下目錄之一：

• $HOME/.bun-create/<name>：全域性模板目錄
• <專案根目錄>/.bun-create/<name>：專案專屬模板目錄

要建立本地模板，請在 $HOME/.bun-create 中建立一個以模板命名的目錄。

cd $HOME/.bun-create
mkdir foo
cd foo

然後，在該目錄下建立 package.json 檔案，內容如下：

{
  "name": "foo"
}

在檔案系統的其他位置執行 bun create foo，以驗證 Bun 是否能找到你的本地模板。

設定邏輯

你可以在本地模板的 package.json 的 "bun-create" 欄位中指定安裝前後執行的指令碼。

{
  "name": "@bun-examples/simplereact",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "bun-create": {
    "preinstall": "echo 'Installing...'", // 單條命令
    "postinstall": ["echo 'Done!'"], // 命令陣列，會依次執行
    "start": "bun run echo 'Hello world!'"
  }
}

preinstall 和 postinstall 接受字串或字串陣列。陣列中的命令會按順序執行。

克隆模板後，bun create 會從 package.json 中移除 "bun-create" 部分，然後再將其寫入目標資料夾。

參考

CLI 引數

環境變數