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 参数

环境变量