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

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

컴파일 방식

  • 정적 컴파일(Go, C)

  • 인터프리터(Pyhton, JS)

  • JIT(V8)

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

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

  • 트랜스파일

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

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

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

  • 컴파일

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

    • vs 트랜스파일

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

  • 폴리필

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

어떤 도구?

  • 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은 변환식

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

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

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

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

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

  • minify: mangler + compressor

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

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

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

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

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

Reference

Last updated