프론트엔드에서 컴파일러와 트랜스파일러란 무엇인가?

자바스크립트는 여러 곳(브라우저, Node.js)에서 실행되고 있습니다. 각 실행 환경에서는 이해하는 문법에 차이가 있는데요. 우리가 실행하고자하는 환경에서 이해할 수 있는 문법으로 변경이 필요합니다.

컴파일 방식

• 정적 컴파일(Go, C)

• 인터프리터(Pyhton, JS)

• JIT(V8)

  • 현실적으로는 인터프리터도 컴파일이 있습니다.

트랜스파일 vs 컴파일 vs 폴리필

• 트랜스파일

  • 유사한 두 언어 사이에서 변환

  • A → B 언어로 변환하거나 최신 버전의 코드를 이전 버전의 코드로 변환(TypeScript → JavaScript, ES6+ → ES5)

  • 트랜스파일은 문법만 변환, 폴리필(새로운 메서드나 객체)은 추가로 필요할 수 있다.

• 컴파일

  • 고급 언어를 컴퓨터가 이해하는 기계어로 변역

  • vs 트랜스파일

    • 컴파일이 영어를 한국어로 번역해 주는 번역이라면, 트랜스파일은 옛 우리말을 현대 한국어로 번역

• 폴리필

  • 브라우저에서 지원하지 않는 코드를 사용가능한 코드로 변환한 코드

어떤 도구?

Babel

• Javascript 컴파일러/트랜스파일러

• 최신 자바스크립트 문법 →(변환 = 컴파일/트랜스파일) 브라우저가 이해할 수 있는 코드

• 변환할 대상을 선정하고 변환식(plugin)에 따라 변경

  • browserslist(.browserslistrc, package.json, babel)를 설정하거나 @babel/preset-env를 사용해서 브라우저 목록 골라냅니다.

• 대표적인 preset

  • @babel/preset-env: 최신 ES 스펙 변환해주는 프리셋

  • @babel/preset-react: jsx와 같은 react 문법 변환해주는 프리셋

  • @babel/preset-typescript: 타입스크립트 문법을 변환해주는 프리셋

• preset은 plugin 목록

• plugin은 변환식

esbuild

• Go를 기반으로 빠른 속도와 번들링까지 가능한 트랜스파일러

• Babel(트랜스파일러), Terser(mangler, compressor) 대신해서 사용할 수 있습니다.

• JS, CSS, TS, JSX를 자체 트랜스파일할 수 있습니다.

  • TS 트랜스파일할 때 타입 에러를 알려주지는 않습니다.(tsc로 검사해야한다)

  • 커스텀한 Typescript 파서는 성능을 올려줍니다

• minify: mangler + compressor

• mangler: 변수명, 함수명, 속성명 짧게 표기

• compressor: 불필요한 코드 제거, 표현 단순화

SWC

• Rust를 기반으로 빠른 속도와 쉬운 사용을 목표로 하는 플랫폼(Speedy Web Compiler)

• 현재는 컴파일 위주로 사용, 번들링은 개발 중, minify역할도 가능

• swc-loader형태로 다른 번들러에 추가됩니다.

Reference

• https://esbuild.github.io/

• https://tech.kakaoent.com/front-end/2022/220217-learn-babel-terser-swc/

• https://swc.rs/

• https://babeljs.io/docs/

• https://ko.javascript.info/polyfills