Transpiler & Bundler

Transpiler

• 자바스크립트는 다양한 환경(다양한 브라우저, Node.js)에서 실행되는데 실행되는 곳마다 인식하는 자바스크립트에 차이가 있다.

• 우리가 작성한 코드를 실행하고자 하는 브라우저에서 이해할 수 있는 문법으로 변환하기 위해 필요하다.

• 이런 변환 과정을 Transpile, 또는 Compile이라고 한다.

대표적인 트랜스파일러

• Babel -> 가장 기본적인 트랜스파일러

• Typescript -> 타입스크립트를 자바스크립트로 트랜스파일하는 트랜스파일러

• esbuild -> Go 언어를 기반으로 빠른 속도와 번들링까지 가능한 차세데 대표 트랜스파일러

• SWC -> Rust 언어를 기반으로 빠른 속도와 쉬운 사용을 목표로 하는 인기있는 트랜스파일러

Bundler

• 개발 과정에서 코드를 작성할 때, 실행 환경보다는 우리가 이해할 수 있는 구조로 모듈을 나누고 설계한다.

• 이렇게 작성된 코드를 브라우저에서 최적화 및 실행하기 위해 함께 묶는 작업을 번들링이라고 한다.

• 최종적으로 브라우저가 이해할 수 있는 적절한 크기의 파일들(하나 혹은 여러개)로 만들어지고 이것을 실행한다

대표적인 번들러

• Webpack -> 가장 기본적이고 대표적인 번들러

• Rollup -> es6 모듈 기반으로 라이브러리 번들링에 가장 많이 쓰이는 번들러

• Vite -> 빠른 속도와 쉬운 사용법으로 가장 인기있는 번들러

• esbuild -> Go 언어를 기반으로 빠른 속도와 트랜스파일까지 가능한 차세데 대표 번들러