바벨(Babel)

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

 

배경

크로스 브라우징

몇 년전까지만 하더라도 사파리에서는 Promise.prototype.finally 메소드를 사용할 수 없었다 이러한 크로스 브라우징 이슈를 해결하기 위해 바벨이 등장했다.

ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다.

 

바벨 최신 버전과 터미놀 도구를 사용하기 위한 커맨드라인 도구 함께 설치를 위한 명령어

npm install -D @babel/core @babel/cli

바벨은 세 단계로 빌드를 진행한다.

1. 파싱(Parsing)

2. 변환(Transforming)

3. 출력(Printing)