Transpiling & Babel

# 트랜스파일?

트랜스파일은 기본적으로 어떤 코드를 다른 코드로 변환하는 것을 말한다. 프론트엔드에서는 주로 ES6+문법을 ES5문법으로 변환한다. ES6의 경우 비교적 최신 문법이고 지원하지 않는 브라우저가 있기 때문에 ES5 이하 문법으로 변환하는 것이 목적이다. 트랜스파일은 보통 빌드할 때, 함께 실행한다.

대표적인 트랜스파일러로는 Babel이 있다.
바벨을 사용하기 위한 라이브러리는 다음과 같은 것들이 있다.

@babel/core

바벨을 사용하기 위한 핵심 모듈(필수)

@babel/cli

command line을 사용하여 코드를 transpile하기 위한 모듈

@babel/node

ES6로 작성된 노드 코드를 실행하는 모듈
(성능 저하 이슈가 있어서 프로덕션에서는 사용하지 않는다.)

다음은 자주 사용되는 Babel Preset이다. Preset은 특정 목적에 맞게 작성된 코드들이라고 이해하면 된다. [Babel Preset 링크]

• preset-env: ES6 => ES5
• preset-react: react문법 => ES5
• preset-typescript: typescript => ES5
• preset-flow: flow => ES5

npm에 preset이 존재하고 node_modules에 설치되어 있다면 babel.config.json에 다음과 같이 작성하여 사용할 수 있다.