※인프런의 “프론트엔드 개발환경의 이해와 실습”을 공부하고 정리한 포스트 입니다.※
브라우저에서 사용하는 자바스크립트 버전이 달라서 프론트엔드 코드가 일관적이지 않는 문제가 있다.
이러한 크로스 브라우징을 해결하기 위해 babel이 탄생했다.
babel은 ES5+ 코드를 모든 브라우저에서 일관되게 동작하도록 호환성을 지켜주며 Typescript나 JSX 와 같은 코드들도 변환할 수 있다.
babel은 core와 터미널에서 사용하기 위해서 cli를 설치해야한다.
설치하면 node_modules/.bin/babel 이라는 명령어가 생기며
간단하게 npx babel 로 실행할수 있다.
바벨은 3단계를 거친다.
- 파싱: 코드를 읽어서 토큰별로 분해한다.
- 변환:ES5+ 코드를 ES5로 변환한다.
- 출력: 변환된것을 출력한다.
Plugins
플러그인은 코드를 받아 변환시킨다.
커스텀 플러그인을 만들떄는 visitor 객체가 있어야한다.
Identifier 함수는 바벨이 만든 AST 노드를 출력한다.
VariableDeclaration 함수는 변선 선언 키워드가 들어온다.
path.node.name 값에 다시 입력해주면 기존 코드를 바꿀수 있다.
Presets
필요한 플러그인들이 너무 많기 떄문에 일일이 설정할수 가 없다.
그렇기에 여러가지 플러그인들을 하나로 모은걸 프리셋이라고 한다.
