esbuild 와 swc: Fast Transpiler

"esbuild 와 swc 가 타입 빨리 strip. 타입 체크 안 함. 그게 기능."

뭐 함

esbuild (Go) 와 swc (Rust) 가 매우 빠른 TypeScript-to-JavaScript transpiler. 너의 `.ts` 파일 받아서 밀리초 안에 `.js` 파일 만듦. 안 하는 거: 타입 체크. 타입 떼고 emit; 그게 전체 일.

이거 의도적. 타입 체크가 느려 — 그래프 문제니까 (모든 타입이 다른 타입 참조). Transpilation 이 파일별 병렬-friendly. 일 나눠서 — emit 엔 transpiler, 타입 체크엔 `tsc --noEmit` — 빠른 build 와 전체 타입 안전 둘 다 얻음.

어디서 나타나

esbuild 나 swc 거의 직접 안 써. 임베드 됨:

Vite 가 dev-시점 transpilation 에 esbuild 사용.
Next.js 가 swc 사용.
Bun 이 자기 transpiler 사용 (JavaScriptCore 에서 fork).
tsx (Node TS wrapper) 가 esbuild 사용.
Vitest 가 esbuild 사용.

Modern TypeScript build tool 어떤 거든 썼으면, esbuild 나 swc 간접적으로 썼어.

직접 쓸 때

Bundling: esbuild src/main.ts --bundle --outfile=dist/bundle.js. Full build pipeline 필요 없는 작은 lib 에. 실험/프로토타입 코드에. Server-side bundling 에.

Fast transpiler + 타입-체크-only `tsc` 가 modern TypeScript build pipeline. Vite, Next, Bun 다 이 모델 따름. 분할이 TypeScript 가 더 이상 느리게 안 느껴지는 이유.

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 설치하고 작은 2-파일 TS 프로젝트를 단일 JS bundle 로 bundle. 같은 일 하는 tsc 와 build 시간 비교. 그다음 타입 에러 추가하고 관찰 — esbuild 가 성공, tsc 가 실패.

Hint

시간 차이가 esbuild 쪽 10-100x. 타입-안전 차이가 catch — esbuild 가 타입 에러 완전 무시. 둘 다 필요: emit 엔 fast transpiler, 체크엔 tsc.

esbuild 와 swc: Fast Transpiler

뭐 함

어디서 나타나

직접 쓸 때

Code

External links

Exercise

Progress

댓글 0