Babel 이란? 기본 동작 원리

바벨은 컴파일러다. 웹팩과 비슷하다고 느끼고 어느 것을 써야 할지 모르겠다면 그것은 살짝 잘못된 개념이라 볼 수 있겠다. 웹팩은 수많은 라이브러리를 이용한 자바스크립트 파일들을 하나로 짠 묶어서 만들어주는 것이고 바벨은 코드 자체를 자바스크립트로 변환 시켜주는 것이다. 그렇다 바벨도 es6이상을 지원하지 않는 등 최신 브라우저에서 뿐이 아닌 다른 브라우저에서도 지원해주는 언어로 변환 시켜 주는 것이다.  

 

바벨을 설치하고 기본동작에 관해 알아보자

 

npm install @babel/core    // 바벨~
npm install @babel/cli     // webpack-cli 처럼 터미널에서 바벨을 쓸 수 있게 하기 위해

 

한 번 IE 에서는 지원하지 않는 es6 문법으로 된 스크립트 파일을 하나 만들어보자

 

화살표 함수와 const 는 es6에서 지원하기 때문에 적절한 코드가 되보인다. 

 

바벨은 3단계로 빌드를 진행하는데 

* 1. 파싱

* 2. 변환

* 3. 출력

이 되겠다. 

 

자 우선 한번 npx babel 을 통해 바벨을 사용할 수 있다고 하니 한번 실행시켜 보면

고냥 고대로 기존에 작성된 코드가 나온다. 

 

이 이유는 바로 파싱단계에서 저 위의 코드를 바벨이 인자로 성공적으로 받긴 받았지만 아무런 변환작업을 해주지 않고 그대로 출력해냈기 때문에 그대로 결과가 나오는 것이다. 

 

한번 직접 커스터마이징을 해서 변환을 주는 플러그인을 만들어보자.

 

--help 옵션을 통해 바벨 라이브러리를 어떻게 사용하는지 대략 알 수 있으므로 한 번 눈으로라도 보는 걸 추천한다.

위 바벨모듈의 코드에서 바벨 플러그인은 visitor 객체를 리턴해야되고 우리가 지어준 함수는 path 라는 객체를 전달받는데 그게 우리가 파싱할 코드라고 보면 되겠다. 콘솔로 path.node 를 찍어보면 다른 속성들이 있는것도 한 번 확인해 볼 수 있겠다. 

 

성공적으로 const 가 var 로 바뀌어서 출력 된 것을 볼 수 있다.