bun create

Примечание

Вам не нужен bun create для использования Bun. Вам вообще не нужна никакая конфигурация. Эта команда существует для того чтобы сделать начало работы немного быстрее и проще.

Создайте новый проект Bun с помощью bun create. Это гибкая команда которую можно использовать для создания нового проекта из React-компонента npm-пакета create-<template> GitHub-репозитория или локального шаблона.

Если вы хотите создать совершенно новый пустой проект используйте bun init.

Из React-компонента

bun create ./MyComponent.tsx превращает существующий React-компонент в полную среду разработки с горячей перезагрузкой и продакшен-сборкой одной командой.

bash

$ bun create ./MyComponent.jsx # .tsx также поддерживается

Примечание

🚀 Преемник Create React App — bun create <component> предоставляет всё что разработчики любили в Create React App но с современными инструментами более быстрой сборкой и поддержкой бэкенда.

Как это работает

Когда вы запускаете bun create <component> Bun:

Использует сборщик JavaScript Bun для анализа графа модулей.
Собирает все зависимости необходимые для запуска компонента.
Сканирует экспорты точки входа на наличие React-компонента.
Генерирует файл package.json с зависимостями и скриптами необходимыми для запуска компонента.
Устанавливает любые отсутствующие зависимости используя bun install --only-missing.
Генерирует следующие файлы:
- ${component}.html
- ${component}.client.tsx (точка входа для фронтенда)
- ${component}.css (css-файл)
Автоматически запускает сервер разработки фронтенда.

Использование TailwindCSS с Bun

TailwindCSS — это чрезвычайно популярный CSS-фреймворк основанный на утилитах используемый для стилизации веб-приложений.

Когда вы запускаете bun create <component> Bun сканирует ваш файл JSX/TSX на наличие имён классов TailwindCSS (и любых файлов которые он импортирует). Если он обнаруживает имена классов TailwindCSS он добавляет следующие зависимости в ваш package.json:

json

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

Мы также настраиваем bunfig.toml для использования плагина TailwindCSS от Bun с Bun.serve()

toml

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

И файл ${component}.css с @import "tailwindcss"; в начале:

css

@import "tailwindcss";

Использование `shadcn/ui` с Bun

shadcn/ui — это чрезвычайно популярный инструмент библиотеки компонентов для создания веб-приложений.

bun create <component> сканирует любые компоненты shadcn/ui импортированные из @/components/ui.

Если он находит какие-либо он запускает:

bash

# Предполагая что bun обнаружил импорты из @/components/ui/accordion и @/components/ui/button
bunx shadcn@canary add accordion button # и любые другие компоненты

Поскольку shadcn/ui сам использует TailwindCSS bun create также добавляет необходимые зависимости TailwindCSS в ваш package.json и настраивает bunfig.toml для использования плагина TailwindCSS от Bun с Bun.serve() как описано выше.

Дополнительно мы настраиваем следующее:

tsconfig.json для псевдонима "@/*" в "src/*" или . (в зависимости от наличия директории src/)
components.json чтобы shadcn/ui знал что это проект shadcn/ui
файл styles/globals.css который настраивает Tailwind v4 так как ожидает shadcn/ui
файл ${component}.build.ts который собирает компонент для продакшена с настроенным bun-plugin-tailwind

bun create ./MyComponent.jsx — это один из самых простых способов запустить код сгенерированный LLM такими как Claude или ChatGPT локально.

Из `npm`

bun create <template> [<destination>]

Предполагая что у вас нет локального шаблона с тем же именем эта команда загрузит и выполнит пакет create-<template> из npm. Следующие две команды будут вести себя идентично:

bun create remix
bunx create-remix

Обратитесь к документации соответствующего пакета create-<template> для полной документации и инструкций по использованию.

Из GitHub

Это загрузит содержимое GitHub-репозитория на диск.

bash

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

При желании укажите имя для папки назначения. Если назначение не указано будет использовано имя репозитория.

bash

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

Bun выполнит следующие шаги:

Загрузит шаблон
Скопирует все файлы шаблона в папку назначения
Установит зависимости с bun install.
Инициализирует новый Git-репозиторий. Откажитесь с флагом --no-git.
Запустит настроенный скрипт start шаблона если определён.

NOTE

По умолчанию Bun _не перезаписывает_ существующие файлы. Используйте флаг `--force` для перезаписи существующих файлов.

Из локального шаблона

Предупреждение

В отличие от удалённых шаблонов запуск bun create с локальным шаблоном удалит всю папку назначения если она уже существует! Будьте осторожны.

Шаблонизатор Bun может быть расширен для поддержки пользовательских шаблонов определённых в вашей локальной файловой системе. Эти шаблоны должны находиться в одной из следующих директорий:

$HOME/.bun-create/<name>: глобальные шаблоны
<project root>/.bun-create/<name>: шаблоны конкретного проекта

Примечание

Вы можете настроить путь к глобальному шаблону установив переменную окружения BUN_CREATE_DIR.

Для создания локального шаблона перейдите в $HOME/.bun-create и создайте новую директорию с желаемым именем вашего шаблона.

bash

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

Затем создайте файл package.json в этой директории со следующим содержимым:

json

{
  "name": "foo"
}

Вы можете запустить bun create foo в другом месте вашей файловой системы чтобы убедиться что Bun правильно находит ваш локальный шаблон.

Логика настройки

Вы можете указать скрипты настройки до и после установки в секции "bun-create" вашего локального шаблона package.json.

json

{
  "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!'"
  }
}

Поддерживаются следующие поля. Каждое из них может соответствовать строке или массиву строк. Массив команд будет выполнен по порядку.

Поле	Описание
`postinstall`	выполняется после установки зависимостей
`preinstall`	выполняется до установки зависимостей

После клонирования шаблона bun create автоматически удалит секцию "bun-create" из package.json перед записью его в папку назначения.

Справочник

Флаги CLI

Флаг	Описание
`--force`	Перезаписать существующие файлы
`--no-install`	Пропустить установку `node_modules` и задач
`--no-git`	Не инициализировать git-репозиторий
`--open`	Запустить и открыть в браузере после завершения

Переменные окружения

Имя	Описание
`GITHUB_API_DOMAIN`	Если вы используете GitHub enterprise или прокси вы можете настроить GitHub-домен который Bun опрашивает для загрузок
`GITHUB_TOKEN` (или `GITHUB_ACCESS_TOKEN`)	Это позволяет `bun create` работать с приватными репозиториями или если вы получили ограничение по скорости. `GITHUB_TOKEN` выбирается вместо `GITHUB_ACCESS_TOKEN` если существуют оба.

Как работает `bun create`

Когда вы запускаете bun create ${template} ${destination} происходит следующее:

ЕСЛИ удалённый шаблон

GET registry.npmjs.org/@bun-examples/${template}/latest и разбор
GET registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz
Декомпрессия и извлечение ${template}-${latestVersion}.tgz в ${destination}
- Если есть файлы которые будут перезаписаны предупредить и выйти если не передан --force

ЕСЛИ GitHub-репозиторий

Загрузить tarball из GitHub API
Декомпрессия и извлечение в ${destination}
- Если есть файлы которые будут перезаписаны предупредить и выйти если не передан --force

ИНАЧЕ ЕСЛИ локальный шаблон

Открыть папку локального шаблона
Удалить директорию назначения рекурсивно
Копировать файлы рекурсивно используя самые быстрые доступные системные вызовы (на macOS fcopyfile и Linux copy_file_range). Не копировать и не traversing в папку node_modules если существует (это одно делает его быстрее чем cp)
Разобрать package.json (снова!) обновить name на ${basename(destination)} удалить секцию bun-create из package.json и сохранить обновлённый package.json на диск.
- ЕСЛИ обнаружен Next.js добавить bun-framework-next в список зависимостей
- ЕСЛИ обнаружен Create React App добавить точку входа в /src/index.{js,jsx,ts,tsx} в public/index.html
- ЕСЛИ обнаружен Relay добавить bun-macro-relay чтобы Relay работал
Автоматически определить npm-клиент предпочитая pnpm yarn (v1) и наконец npm
Запустить любые задачи определённые в "bun-create": { "preinstall" } с npm-клиентом
Запустить ${npmClient} install если не передан --no-install ИЛИ нет зависимостей в package.json
Запустить любые задачи определённые в "bun-create": { "postinstall" } с npm-клиентом
Запустить git init; git add -A .; git commit -am "Initial Commit";
- Переименовать gitignore в .gitignore. NPM автоматически удаляет файлы .gitignore из появления в пакетах.
- Если есть зависимости это запускается в отдельном потоке одновременно пока устанавливаются node_modules
- Использование libgit2 если доступно было протестировано и выполнялось в 3 раза медленнее в микробенчмарках

Из React-компонента ​

Как это работает ​

Использование TailwindCSS с Bun ​

Использование shadcn/ui с Bun ​

Из npm ​

Из GitHub ​

Из локального шаблона ​

Логика настройки ​

Справочник ​

Флаги CLI ​

Переменные окружения ​

Как работает bun create ​

Из React-компонента

Как это работает

Использование TailwindCSS с Bun

Использование `shadcn/ui` с Bun

Из `npm`

Из GitHub

Из локального шаблона

Логика настройки

Справочник

Флаги CLI

Переменные окружения

Как работает `bun create`