Bun 의 워치 모드

Bun 은 CLI 플래그를 통해 두 가지 종류의 자동 리로딩을 지원합니다:

--watch 모드: import 된 파일이 변경되면 Bun 의 프로세스를 강제로 재시작합니다.
--hot 모드: import 된 파일이 변경되면 코드를 소프트 리로딩합니다 (프로세스를 재시작하지 않음).

`--watch` 모드

워치 모드는 bun test 또는 TypeScript, JSX, JavaScript 파일을 실행할 때 사용할 수 있습니다.

--watch 모드로 파일을 실행하려면:

bash

bun --watch index.tsx

--watch 모드로 테스트를 실행하려면:

bash

bun --watch test

--watch 모드에서 Bun 은 모든 import 된 파일을 추적하고 변경 사항을 감시합니다. 변경이 감지되면 Bun 은 프로세스를 재시작하며, 초기 실행에 사용된 것과 동일한 CLI 인수 및 환경 변수 세트를 유지합니다. Bun 이 충돌하면 --watch 는 자동으로 프로세스를 재시작하려고 시도합니다.

NOTE

⚡️ 리로드는 빠릅니다. 익숙한 파일시스템 워처는 네이티브 API 를 래핑하는 여러 계층의 라이브러리를 사용하거나 더 나쁘게는 폴링에 의존합니다.

대신 Bun 은 kqueue 또는 inotify 와 같은 운영체제 네이티브 파일시스템 워처 API 를 사용하여 파일 변경을 감지합니다. Bun 은 더 큰 프로젝트로 확장할 수 있도록 여러 최적화를 수행합니다 (예: 파일 디스크립터에 높은 rlimit 설정, 정적으로 할당된 파일 경로 버퍼, 가능한 경우 파일 디스크립터 재사용 등).

다음 예시는 VSCode 가 각 키프레스마다 파일을 저장 하도록 설정된 상태에서, Bun 이 파일을 편집하는 동안 실시간으로 리로딩하는 것을 보여줍니다.

bun run --watch watchy.tsx

tsx

import { serve } from "bun";

console.log("I restarted at:", Date.now());

serve({
  port: 4003,
  fetch(request) {
    return new Response("Sup");
  },
});

이 예시에서 Bun 은

워치 모드에서 bun test 실행 및 save-on-keypress 활성화:

bash

bun --watch test

NOTE

**`--no-clear-screen`** 플래그는 터미널이 지워지지 않기를 원하는 시나리오에서 유용합니다. 예를 들어 `concurrently` 와 같은 도구를 사용하여 여러 `bun build --watch` 명령을 동시에 실행할 때 유용합니다. 이 플래그가 없으면 한 인스턴스의 출력이 다른 인스턴스의 출력을 지워 오류가 숨겨질 수 있습니다. `--no-clear-screen` 플래그는 TypeScript 의 `--preserveWatchOutput` 과 유사하게 이 문제를 방지합니다. `--watch` 와 함께 사용할 수 있습니다. 예: `bun build --watch --no-clear-screen`.

`--hot` 모드

bun --hot 을 사용하여 Bun 으로 코드를 실행할 때 핫 리로딩을 활성화하세요. 이는 Bun 이 전체 프로세스를 강제로 재시작하지 않는다는 점에서 --watch 모드와 다릅니다. 대신 코드 변경을 감지하고 내부 모듈 캐시를 새 코드로 업데이트합니다.

NOTE

이는 브라우저의 핫 리로딩과 동일하지 않습니다! 많은 프레임워크가 "핫 리로딩" 경험을 제공합니다. 예를 들어 React 컴포넌트와 같은 프론트엔드 코드를 편집하고 페이지를 새로고침하지 않고도 브라우저에서 변경 사항을 확인할 수 있습니다. Bun 의 `--hot` 은 이 경험의 서버 측 버전입니다. 브라우저에서 핫 리로딩을 사용하려면 [Vite](https://vite.dev) 와 같은 프레임워크를 사용하세요.

bash

bun --hot server.ts

진입점 (위 예시의 server.ts) 에서 시작하여 Bun 은 모든 import 된 소스 파일 (node_modules 에 있는 파일 제외) 의 레지스트리를 구축하고 변경 사항을 감시합니다. 변경이 감지되면 Bun 은 "소프트 리로딩"을 수행합니다. 모든 파일이 재평가되지만 모든 전역 상태 (특히 globalThis 객체) 는 유지됩니다.

// make TypeScript happy
declare global {
  var count: number;
}

globalThis.count ??= 0;
console.log(`Reloaded ${globalThis.count} times`);
globalThis.count++;

// prevent `bun run` from exiting
setInterval(function () {}, 1000000);

이 파일을 bun --hot server.ts 로 실행하면 파일을 저장할 때마다 리로드 카운트가 증가하는 것을 볼 수 있습니다.

bash

bun --hot index.ts

txt

Reloaded 1 times
Reloaded 2 times
Reloaded 3 times

nodemon 과 같은 기존 파일 워처는 전체 프로세스를 재시작하므로 HTTP 서버 및 기타 상태 저장 객체가 손실됩니다. 반면 bun --hot 은 프로세스를 재시작하지 않고도 업데이트된 코드를 반영할 수 있습니다.

HTTP 서버

이를 통해 예를 들어 서버 자체를 종료하지 않고도 HTTP 요청 핸들러를 업데이트할 수 있습니다. 파일을 저장하면 프로세스가 재시작되지 않고 업데이트된 코드로 HTTP 서버가 리로딩됩니다. 이로 인해 매우 빠른 리프레시 속도를 얻을 수 있습니다.

globalThis.count ??= 0;
globalThis.count++;

Bun.serve({
  fetch(req: Request) {
    return new Response(`Reloaded ${globalThis.count} times`);
  },
  port: 3000,
});

NOTE

**참고** — Bun 의 향후 버전에서는 핫 리로딩을 위한 더 나은 수명 주기 관리와 생태계와의 정렬을 위해 Vite 의 `import.meta.hot` 지원이 계획되어 있습니다.

구현 세부 사항">

핫 리로딩 시 Bun 은 다음을 수행합니다:

내부 require 캐시와 ES 모듈 레지스트리 (Loader.registry) 를 재설정합니다
가비지 컬렉터를 동기적으로 실행합니다 (메모리 누수를 최소화하지만 런타임 성능 저하의 대가가 있음)
모든 코드를 처음부터 다시 트랜스파일합니다 (소스맵 포함)
JavaScriptCore 로 코드를 재평가합니다

이 구현은 특별히 최적화되지 않았습니다. 변경되지 않은 파일도 다시 트랜스파일합니다. 증분 컴파일을 시도하지 않습니다. 이는 시작점입니다.

--watch 모드 ​

--hot 모드 ​

HTTP 서버 ​

구현 세부 사항"> ​

`--watch` 모드

`--hot` 모드

HTTP 서버

구현 세부 사항">