바벨

babel polyfill

바벨을 사용하면 es6+ 문법을 es5로 바꿔준다. 근데 바벨 자체는 문법 변환기이다. 말그대로 es6문법의 텍스트를 es5문법의 텍스트로 글자만 변경해준다는것이다.

 

문법 자체 뿐만아니라 es6에서는 새로운 객체와 그 객체의 API들이 추가 되었다.

(새로 추가된 전역 객체들(Promise, Map, Set) )

 

이 API들은 구형 브라우저에서 인식하지못한다. 그래서 babel polyfill을 사용하는것이다. 이 polyfill은 브라우저에서 인식하지 못하는 API들을 추가해준다.(정확히는 프로토타입에)

 

즉 babel + babel polyfill을 같이 사용해야지 es6+ 문법을 es5문법으로 바꾼뒤 실행까지 가능해지는것이다. 바벨만 사용하면 Promise() 함수 자체를 인식하지 못해서 Promise is not a function이 콘솔에 찍힌다.

 

babel polyfill이 없이 babel만 사용하면 문법만 변환되고 그 변환된 문법을 실행하지 못한다.

 

babelrc

이것은 바벨의 설정파일이다. 바벨은 js -> js 변환기이다. 

 

babel preset

프리셋이라는건 미리설정하기 정도로 해석하면 된다. 바벨 프리셋은 한마디로 문법 모음집이다.

es6의 문법을 모아놓은 es2015 preset, 리액트의 문법인 JSX를 모아놓은 프리셋인 react preset등이 있다.

이런 준비물을 세팅한 다음에 바벨을 실행해야 바벨이 정확히 그 문법을 이해해서 es5로 해석할 수 있게 된다.

 

babel-cli, babel-core - 바벨 컴파일러

babel-cli는 cli 명령어를 통해서 컴파일을 하는데 사용한다.

babel-core는 es6+의 문법을 es5로 변환하는 컴파일러이다. 이걸 수정하여 내식대로 es5로 컴파일 시킬수있다.