Babel

babel

• 최신 자바크스립트 문법을 브라우저에서 이해할 수 있는 수준으로 변환해주는 트랜스파일러이자 컴파일러

• 설정파일을 통해 어떤 문법을 변환할 것인지 정의

• Preset-env에서 타겟 브라우저를 선택하면, 자동으로 필요한 문법만 변환해줌

• 여러가지 preset과 plugin을 통해 자바스크립트의 대표적인 트랜스파일러로 자리잡음

• 대규모 프로젝트 성능이슈로 새로운 도구들이 많이 생김

@babel/core @babel/cli

• pnpm exec babel src --out-dir dist

• 내가 작성한 코드(src/ 하위 모든 코드를 대상)를 브라우저가 이해할 수 있는 코드로 컴파일하여 dist/ 하위로 다시 작성한다

.babelrc.json (babel.config.json, babelrc.js, babel.config.js)

• 설정 파일을 바탕으로 변환할 대상을 선정

  • 정의된 대상이 아닌 경우 변환되지 않음

• 설정 파일에는 plugin과 preset을 정의

  • plugin: 어떤 문법을 어떻게 바꿀지에 대한 변환식

  • preset: 플러그인의 집합

• 선정된 대상이 변환식에 따라 변경된다.

@babel/preset-env는 브라우저 목록(.browserlistrc)를 사용해서 변환할 대상을 적절히 골라낸다.

• 최신 ES 스펙을 가지며, 세부 관리가 필요 없고 자동으로 필요한 문법만 처리하여 사이즈를 줄임