bun create

使用 bun create 建立新的 Bun 專案範本。這是一個彈性的命令，可以用於從 React 組件、create-<template> npm 套件、GitHub 儲存庫或本機範本建立新專案。

如果您想要建立一個全新的空專案，請使用 bun init。

從 React 組件

bun create ./MyComponent.tsx 將現有的 React 組件轉換為完整的開發環境，只需一個命令即可實現熱重載和生產版本建置。

bun create ./MyComponent.jsx # .tsx also supported

運作方式

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

1. 使用 Bun 的 JavaScript bundler 來分析您的模組依賴圖。
2. 收集執行組件所需的所有依賴項。
3. 掃描進入點的輸出，以尋找 React 組件。
4. 產生一個 package.json 檔案，其中包含執行組件所需的依賴項和腳本。
5. 使用 bun install --only-missing 安裝任何遺失的依賴項。
6. 產生以下檔案
   • ${component}.html
   • ${component}.client.tsx (前端的進入點)
   • ${component}.css (css 檔案)
7. 自動啟動前端開發伺服器。

搭配 Bun 使用 TailwindCSS

TailwindCSS 是一個極其流行的實用優先 CSS 框架，用於樣式化 Web 應用程式。

當您執行 bun create <component> 時，Bun 會掃描您的 JSX/TSX 檔案以尋找 TailwindCSS 類別名稱 (以及它導入的任何檔案)。如果偵測到 TailwindCSS 類別名稱，它會將以下依賴項添加到您的 package.json

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

我們還配置 bunfig.toml 以使用 Bun 的 TailwindCSS 外掛程式搭配 Bun.serve()

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

以及一個 ${component}.css 檔案，頂部有 @import "tailwindcss";

@import "tailwindcss";

搭配 Bun 使用 shadcn/ui

shadcn/ui 是一個極其流行的組件庫工具，用於建置 Web 應用程式。

bun create <component> 掃描從 @/components/ui 導入的任何 shadcn/ui 組件。

如果找到任何組件，它會執行

# Assuming bun detected imports to @/components/ui/accordion and @/components/ui/button

bunx shadcn@canary add accordion button # and any other components

由於 shadcn/ui 本身使用 TailwindCSS，bun create 也會將必要的 TailwindCSS 依賴項添加到您的 package.json，並配置 bunfig.toml 以使用 Bun 的 TailwindCSS 外掛程式搭配 Bun.serve()，如上所述。

此外，我們設定以下內容

• 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 是在本地執行從 LLM (例如 Claude 或 ChatGPT) 生成的程式碼的最簡單方法之一。

從 npm

bun create <template> [<destination>]

假設您沒有同名的本機範本，此命令將從 npm 下載並執行 create-<template> 套件。以下兩個命令的行為將完全相同

bun create remix

bunx create-remix

請參閱相關的 create-<template> 套件的文件，以取得完整的文檔和使用說明。

從 GitHub

這會將 GitHub 儲存庫的內容下載到磁碟。

bun create <user>/<repo>

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

您可以選擇性地指定目標資料夾的名稱。如果未指定目標，則將使用儲存庫名稱。

bun create <user>/<repo> mydir

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

Bun 將執行以下步驟

• 下載範本
• 將所有範本檔案複製到目標資料夾
• 使用 bun install 安裝依賴項。
• 初始化一個新的 Git 儲存庫。使用 --no-git 標誌選擇不初始化。
• 如果已定義，則執行範本配置的 start 腳本。

從本機範本

Bun 的範本引擎可以擴展以支援在您的本機檔案系統上定義的自訂範本。這些範本應位於以下目錄之一

• $HOME/.bun-create/<name>：全域範本
• <project root>/.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...'", // a single command
    "postinstall": ["echo 'Done!'"], // an array of commands
    "start": "bun run echo 'Hello world!'"
  }
}

支援以下欄位。每個欄位都可以對應一個字串或字串陣列。命令陣列將按順序執行。

在複製範本後，bun create 將在將 package.json 寫入目標資料夾之前，自動從中刪除 "bun-create" 區段。

參考

CLI 標誌

環境變數