프론트엔드에서 컴파일러와 트랜스파일러란 무엇인가?
자바스크립트는 여러 곳(브라우저, Node.js)에서 실행되고 있습니다. 각 실행 환경에서는 이해하는 문법에 차이가 있는데요. 우리가 실행하고자하는 환경에서 이해할 수 있는 문법으로 변경이 필요합니다.
트랜스파일 vs 컴파일 vs 폴리필
어떤 도구?
Javascript 컴파일러/트랜스파일러
최신 자바스크립트 문법 →(변환 = 컴파일/트랜스파일) 브라우저가 이해할 수 있는 코드
변환할 대상을 선정하고 변환식(plugin)에 따라 변경
browserslist(.browserslistrc, package.json, babel)를 설정하거나 @babel/preset-env를 사용해서 브라우저 목록 골라냅니다.
대표적인 preset
@babel/preset-env: 최신 ES 스펙 변환해주는 프리셋
@babel/preset-react: jsx와 같은 react 문법 변환해주는 프리셋
@babel/preset-typescript: 타입스크립트 문법을 변환해주는 프리셋
Go를 기반으로 빠른 속도와 번들링까지 가능한 트랜스파일러
Babel(트랜스파일러), Terser(mangler, compressor) 대신해서 사용할 수 있습니다.
JS, CSS, TS, JSX를 자체 트랜스파일할 수 있습니다.
TS 트랜스파일할 때 타입 에러를 알려주지는 않습니다.(tsc로 검사해야한다)
커스텀한 Typescript 파서는 성능을 올려줍니다
Rust를 기반으로 빠른 속도와 쉬운 사용을 목표로 하는 플랫폼(Speedy Web Compiler)
현재는 컴파일 위주로 사용, 번들링은 개발 중, minify역할도 가능
swc-loader형태로 다른 번들러에 추가됩니다.
Reference
Last updated