Babel

바벨은 자바스크립트 컴파일러이다.

입력도 js, 출력도 js인 컴파일러로, 소스 대 소스 컴파일러라고 불린다고 한다.

IE를 포함한 구형 브라우저는 ES6 를 지원하지 않는데, 최신버전의 자바스크립트를 브라우저가 이해할 수 있는 문법으로 변환해준다

ES6, ES7 등 최신 문법을 사용해서 코딩할 수 있게 해주는 고마운 녀석.. 😂

바벨의 빌드 진행 단계

1. 파싱 : 코드를 읽고 추상 구문 트리로 변환
2. 변환: 추상 구문 트리를 변경
3. 출력: 변경된 결과물 출력

바벨은 파싱, 출력을 담당하며, 변환은 플러그인이 담당한다.

Plugin

바벨 플러그인은 바벨이 어떤 코드를 어떻게 판단할지에 대한 규칙을 나타낸다.

• 변환 플러그인 (@babel/plugin-transform-…) : 특정 표현/문법이 나타나면 특정 방식으로 변환하도록 함
• 문법 플러그인 (@babel/plugin-syntax-…) : 특정 표현/문법을 이해(파싱)할 수 있게 한다.

Preset

babel plugin 들의 모음, 함께 자주 쓰이는 특정 플러그인들의 조합을 묶음으로 만들어 놓았다.

• preset-env는 필요한 플러그인을 프로젝트가 지원하고자 하는 환경에 기반해 빌드 타임에 동적으로 결정하는 특별한 프리셋 (정적 묶음인 기존 프리셋과 구별되는 부분)

babel-polyfill

babel은 문법을 하위 버전으로 변환해줄 뿐, babel을 사용한다고 해서 최신 함수를 사용할 수 있는 건 아니다.

Polyfill : 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각, 플러그인

⇒ 코드가 실행되는 환경에 존재하지 않는 built-in이나 함수들을 구현하여 추가하는 것

polyfill은 프로그램이 처음에 시작될 때 지원하지 않는 기능들을 추가하는 것으로, babel은 컴파일 시에, babel-polyfill은 런타임 시에 실행된다.