Vite 와 Bun 으로 프론트엔드 빌드하기

NOTE

Bun 으로 Vite 를 사용할 수 있지만 많은 프로젝트가 [HTML imports](/ko/bundler/html-static) 로 전환하여 빌드를 더 빠르게 수행하고 수백 개의 종속성을 줄일 수 있습니다.

Vite 는 Bun 에서 바로 작동합니다. Vite 의 템플릿 중 하나로 시작하세요.

bash

bun create vite my-app

txt

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /path/to/my-app...

그런 다음 프로젝트 디렉터리로 cd 하고 종속성을 설치하세요.

bash

cd my-app
bun install

bunx 를 사용하여 vite CLI 로 개발 서버를 시작하세요.

--bun 플래그는 Bun 이 node 대신 bun 을 사용하여 Vite 의 CLI 를 실행하도록 지시합니다. 기본적으로 Bun 은 Vite 의 #!/usr/bin/env node shebang 라인 을 따릅니다.

bash

bunx --bun vite

이 명령을 단순화하려면 package.json 의 "dev" 스크립트를 다음과 같이 업데이트하세요.

json

  "scripts": {
    "dev": "vite", 
    "dev": "bunx --bun vite", 
    "build": "vite build",
    "serve": "vite preview"
  },
  // ...

이제 bun run dev 로 개발 서버를 시작할 수 있습니다.

bash

bun run dev

다음 명령은 프로덕션을 위해 앱을 빌드합니다.

bunx --bun vite build

이것은 Vite + Bun 으로 시작하기 위한 간략화된 가이드입니다. 자세한 내용은 Vite 문서 를 참조하세요.