바벨

크로스브라우징
사용하는 말이 달라서 바벨탑이 실패하듯이 브라우저마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다. 스펙과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ECMA2015+로 작성한 코드를 모든 브라우저에 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다

프리셋
ECMAScript2015+으로 코딩할 때 필요한 플러그인을 일일이 설정하는 일은 무척 번거로운 일이다. 코드 한 줄 작성하는데도 세개 플러그인을 세팅을 했으니 말이다. 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것을 "프리셋"이라고 한다.

프리셋 사용하기
preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨7 이전 버전에는 연돌별로 각 프리셋을 제공했지만 지금은 env 하나로 합쳐졌다.

폴리필

app.js

new Promise();

바벨로 처리하면

'use strict'
new Promise()

env 프리셋으로 변환을 시도했지만 Promise 그대로 변함이 없다. target에 ie 11을 설정하고 빌드한것인데 인터넷 익스플로러는 여전히 프라미스를 해석하지 못하고 에러가 던진다.

브라우저는 현재 스코프부터 시작해 전역까지 Promise라는 이름을 찾으려고 시도할 것이다. 그러나 스코프 어디에도 Promise라는 이름이 없기 때문에 에러가 발생을 할 것이다.
플러그인이 프라미스를 ECMAScript5버전으로 변환할 것으로 기대했는데 예상과는 다르다. 바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다. 그렇지 못한 것들은 폴리필이라고 부르는 코드조각을 추가해서 해결한다.

가령 ECMAScript2015의 블록 스코핑은 ECMAScript5의 함수 스코핑으로 대체할 수 있다. 화살표 함수도 일반 함수로 대체할 수 있다. 이런 것들은 바벨이 변환해서 ECMAScript5 버전으로 결과물을 만든다.

바벨을 웹팩으로 통합
실무 환경에서는 바벨을 직접 사용하는것 보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. 로더 형태로 제공하는데 babel-loader가 있다.