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 打包器 分析您的模块依赖图。
2. 收集运行该组件所需的所有依赖项。
3. 扫描入口点的导出，查找 React 组件。
4. 生成一个 package.json 文件，其中包含运行该组件所需的依赖项和脚本。
5. 使用 bun install --only-missing 安装任何缺失的依赖项。
6. 生成以下文件：
   • ${component}.html
   • ${component}.client.tsx (前端入口点)
   • ${component}.css (css 文件)
7. 自动启动前端开发服务器。

将 TailwindCSS 与 Bun 结合使用

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";

将 shadcn/ui 与 Bun 结合使用

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>：全局模板
• <项目根目录>/.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 标志

环境变量