참고

bun create 를 사용하지 않고도 Bun 을 사용할 수 있습니다. 구성이 전혀 필요하지 않습니다. 이 명령은 시작을 더 빠르고 쉽게 만들기 위해 존재합니다.

---

bun create 로 새 Bun 프로젝트를 템플릿화합니다. 이는 React 컴포넌트, create-<template> npm 패키지, GitHub 저장소 또는 로컬 템플릿에서 새 프로젝트를 생성하는 데 사용할 수 있는 유연한 명령입니다.

새로운 빈 프로젝트를 생성하려면 bun init 을 사용하세요.

React 컴포넌트에서

bun create ./MyComponent.tsx 는 기존 React 컴포넌트를 핫 리로드 및 프로덕션 빌드와 함께 완전한 개발 환경으로 한 번의 명령으로 변환합니다.

$ bun create ./MyComponent.jsx # .tsx 도 지원됨

참고

🚀 Create React App 후속 — bun create <component> 는 개발자들이 사랑했던 Create React App 의 모든 것을 제공하지만 현대적인 툴링, 더 빠른 빌드 및 백엔드 지원을 제공합니다.

작동 방식

bun create <component> 를 실행하면 Bun 은 다음을 수행합니다.

1. Bun 의 JavaScript 번들러 를 사용하여 모듈 그래프를 분석합니다.
2. 컴포넌트 실행에 필요한 모든 종속성을 수집합니다.
3. 진입점의 exports 에서 React 컴포넌트를 스캔합니다.
4. 컴포넌트 실행에 필요한 종속성 및 스크립트가 포함된 package.json 파일을 생성합니다.
5. bun install --only-missing 을 사용하여 누락된 종속성을 설치합니다.
6. 다음 파일을 생성합니다.
   • ${component}.html
   • ${component}.client.tsx (프론트엔드 진입점)
   • ${component}.css (css 파일)
7. 프론트엔드 개발 서버를 자동으로 시작합니다.

Bun 과 함께 TailwindCSS 사용

TailwindCSS 는 웹 애플리케이션 스타일링에 사용되는 매우 인기 있는 유틸리티 우선 CSS 프레임워크입니다.

bun create <component> 를 실행하면 Bun 은 JSX/TSX 파일에서 TailwindCSS 클래스 이름 (및 import 하는 파일) 을 스캔합니다. TailwindCSS 클래스 이름을 감지하면 package.json 에 다음 종속성을 추가합니다.

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

또한 Bun.serve() 와 함께 Bun 의 TailwindCSS 플러그인을 사용하도록 bunfig.toml 을 구성합니다.

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

그리고 상단에 @import "tailwindcss"; 가 있는 ${component}.css 파일을 생성합니다.

@import "tailwindcss";

Bun 과 함께 shadcn/ui 사용

shadcn/ui 는 웹 애플리케이션 구축을 위한 매우 인기 있는 컴포넌트 라이브러리 도구입니다.

bun create <component> 는 @/components/ui 에서 import 된 shadcn/ui 컴포넌트를 스캔합니다.

찾으면 다음을 실행합니다.

# bun 이 @/components/ui/accordion 및 @/components/ui/button 에 대한 import 를 감지했다고 가정
bunx shadcn@canary add accordion button # 그리고 기타 컴포넌트

shadcn/ui 자체도 TailwindCSS 를 사용하므로 bun create 는 package.json 에 필요한 TailwindCSS 종속성을 추가하고 위에서 설명한 대로 Bun.serve() 와 함께 Bun 의 TailwindCSS 플러그인을 사용하도록 bunfig.toml 을 구성합니다.

또한 다음을 설정합니다.

• tsconfig.json 에서 "@/*" 를 "src/*" 또는 . 로 별칭 (src/ 디렉토리 존재 여부에 따라)
• shadcn/ui 가 shadcn/ui 프로젝트임을 알 수 있도록 components.json
• shadcn/ui 가 기대하는 방식으로 Tailwind v4 를 구성하는 styles/globals.css 파일
• bun-plugin-tailwind 가 구성된 프로덕션용 컴포넌트를 빌드하는 ${component}.build.ts 파일

bun create ./MyComponent.jsx 는 Claude 나 ChatGPT 와 같은 LLM 에서 생성된 코드를 로컬에서 실행하는 가장 쉬운 방법 중 하나입니다.

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 스크립트가 정의되어 있으면 실행

NOTE

기본적으로 Bun 은 기존 파일을 _덮어쓰지 않습니다_. 기존 파일을 덮어쓰려면 `--force` 플래그를 사용하세요.

로컬 템플릿에서

경고

원격 템플릿과 달리 로컬 템플릿으로 bun create 를 실행하면 대상 폴더가 이미 존재하는 경우 전체 대상 폴더가 삭제됩니다! 주의하세요.

Bun 의 템플리터는 로컬 파일 시스템에 정의된 사용자 정의 템플릿을 지원하도록 확장할 수 있습니다. 이 템플릿은 다음 디렉토리 중 하나에 있어야 합니다.

• $HOME/.bun-create/<name>: 전역 템플릿
• <project root>/.bun-create/<name>: 프로젝트별 템플릿

참고

BUN_CREATE_DIR 환경 변수를 설정하여 전역 템플릿 경로를 사용자 정의할 수 있습니다.

로컬 템플릿을 생성하려면 $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!'"
  }
}

다음 필드가 지원됩니다. 각각은 문자열 또는 문자열 배열일 수 있습니다. 명령 배열은 순서대로 실행됩니다.

필드	설명
postinstall	종속성 설치 후 실행
preinstall	종속성 설치 전 실행

템플릿을 복제한 후 bun create 는 package.json 에서 "bun-create" 섹션을 제거한 후 대상 폴더에 쓰기 전에 저장합니다.

참조

CLI 플래그

플래그	설명
--force	기존 파일 덮어쓰기
--no-install	node_modules 및 작업 설치 건너뛰기
--no-git	git 저장소 초기화 안 함
--open	완료 후 브라우저에서 시작 및 열기

환경 변수

이름	설명
GITHUB_API_DOMAIN	GitHub 엔터프라이즈 또는 프록시를 사용하는 경우 다운로드를 위해 Bun 이 ping 하는 GitHub 도메인을 사용자 정의할 수 있습니다
GITHUB_TOKEN (또는 GITHUB_ACCESS_TOKEN)	이를 통해 bun create 는 비공개 저장소에서 작동하거나 속도 제한이 걸린 경우 작동합니다. 둘 다 존재하는 경우 GITHUB_TOKEN 이 GITHUB_ACCESS_TOKEN 보다 선택됩니다.

bun create 작동 방식

bun create ${template} ${destination} 을 실행하면 다음과 같은 일이 발생합니다.

원격 템플릿인 경우

1. registry.npmjs.org/@bun-examples/${template}/latest GET 및 파싱
2. registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz GET
3. ${template}-${latestVersion}.tgz 압축 해제 및 ${destination} 으로 추출
   • 덮어쓸 파일이 있으면 경고하고 종료 (--force 전달되지 않은 경우)

GitHub 저장소인 경우

1. GitHub API 에서 tarball 다운로드
2. ${destination} 으로 압축 해제 및 추출
   • 덮어쓸 파일이 있으면 경고하고 종료 (--force 전달되지 않은 경우)

그 외 로컬 템플릿인 경우

1. 로컬 템플릿 폴더 열기

2. 대상 디렉토리 재귀적으로 삭제

3. 사용 가능한 가장 빠른 시스템 호출을 사용하여 파일 재귀적으로 복사 (macOS 에서 fcopyfile 및 Linux 에서 copy_file_range). node_modules 폴더는 복사하거나 탐색하지 않음 (이것만으로도 cp 보다 빠름)

4. package.json 파싱 (다시!), name 을 ${basename(destination)} 으로 업데이트, package.json 에서 bun-create 섹션 제거 및 업데이트된 package.json 을 디스크에 저장

   • Next.js 가 감지되면 종속성 목록에 bun-framework-next 추가
   • Create React App 이 감지되면 /src/index.{js,jsx,ts,tsx} 의 진입점을 public/index.html 에 추가
   • Relay 가 감지되면 Relay 가 작동하도록 bun-macro-relay 추가

5. npm 클라이언트 자동 감지, pnpm, yarn (v1), 마지막으로 npm 선호

6. npm 클라이언트로 "bun-create": { "preinstall" } 에 정의된 작업 실행

7. --no-install 이 전달되거나 package.json 에 종속성이 없는 경우를 제외하고 ${npmClient} install 실행

8. npm 클라이언트로 "bun-create": { "postinstall" } 에 정의된 작업 실행

9. git init; git add -A .; git commit -am "Initial Commit"; 실행

   • gitignore 를 .gitignore 로 이름 변경. NPM 은 패키지에 .gitignore 파일이 나타나는 것을 자동으로 제거합니다.
   • 종속성이 있는 경우 이는 node_modules 가 설치되는 동안 별도의 스레드에서 동시에 실행됩니다
   • 사용 가능한 경우 libgit2 를 사용하는 것은 마이크로 벤치마크에서 3 배 느린 것으로 테스트되었습니다