프론트엔드에서 컴파일러와 트랜스파일러란 무엇인가?
자바스크립트는 여러 곳(브라우저, Node.js)에서 실행되고 있습니다. 각 실행 환경에서는 이해하는 문법에 차이가 있는데요. 우리가 실행하고자하는 환경에서 이해할 수 있는 문법으로 변경이 필요합니다.
트랜스파일 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