esbuild와 SWC: 빠른 변환기와 타입 검사 조합하기

"esbuild와 swc는 타입을 아주 빠르게 지우지만 검사하지는 않아. 그게 역할이야."

무엇을 하는가

Go로 만든 esbuild와 Rust로 만든 swc는 TypeScript를 JavaScript로 밀리초 단위에 변환하는 빠른 도구야. 타입 검사는 하지 않고 표기만 지워 출력해.

타입 검사는 전체 그래프를 따라야 하지만 파일 변환은 병렬화하기 쉬워. 출력과 검사를 분리해 변환기는 emit, tsc --noEmit은 타입 검사를 맡기면 속도와 안전을 함께 얻어.

어디에 들어 있는가

Vite는 개발 변환에 esbuild를 써.
Next.js는 swc를 써.
tsx와 Vitest는 esbuild를 써.
Bun은 자체 변환기를 써.

직접 쓸 때

esbuild src/main.ts --bundle --outfile=dist/bundle.js처럼 작은 라이브러리, 실험 코드, 서버 번들을 만들 때 직접 사용할 수 있어.

빠른 변환기와 타입 검사 전용 tsc가 현대 TypeScript 빌드 파이프라인의 짝이야. Vite, Next, Bun도 이 분리 모델을 따라.

Code

Fast transpiler 의 직접과 간접 사용·bash

# 직접 esbuild — TS 파일 JS 로 bundle.
npx esbuild src/main.ts --bundle --outfile=dist/bundle.js

# 브라우저용 bundle.
npx esbuild src/main.ts --bundle --platform=browser --outfile=dist/bundle.js

# Node 용 bundle.
npx esbuild src/main.ts --bundle --platform=node --outfile=dist/bundle.js

# 직접 swc.
npx swc src --out-dir dist

# 간접 — Vite 가 esbuild 사용.
npm create vite@latest my-app -- --template react-ts
# Vite 가 모든 거 처리: dev 엔 esbuild, prod build 엔 Rollup.

Exercise

작은 두 파일 프로젝트를 esbuild로 묶고 tsc 출력과 시간을 비교해. 의도적인 타입 오류를 넣어 변환 성공과 타입 검사 실패가 동시에 가능한지 확인해.

Hint

빠른 변환기가 훨씬 짧은 시간에 출력을 만들 수 있지만 타입 오류는 지나칠 수 있어. 변환은 전용 도구에 맡기고 tsc 검사를 별도로 통과시켜.

무엇을 하는가

어디에 들어 있는가

직접 쓸 때

Code

External links

Exercise

Progress

댓글 0