ES5 이전까지는 표준이 없었고, jquery 가 브라우저 호환성을 해결해줄 수 있기 때문에 필요 없었다.
ES6 이후에는 새로운 기능이 제대로 작동하도록 보장하는 방법으로 브라우저에서 코드를 실행하기 전에 더 호환성이 높은 코드로 변환하는 방법을 이용하였다. 이 중 가장 유명한 자바스크립트 도구가 Babel 이다.
Babel 은 ES6/7 코드를 ES5 코드로 Transpiling 해주는 Transpiler 이다. 스크립트 자체가 수정되어야 하는 상황으로 트랜스파일이 필요할 때 사용한다.
과거에는 최신 자바스크립트 기능을 사용하는 유일한 방법이 브라우저가 그 기능을 지원할 때까지 몇 주, 심지어는 몇 년을 기다렸다. 이제는 바벨을 통해 최신 자바스크립트 기능을 바로 사용할 수 있게 됐다.
바벨 프로젝트는 최초 2014년 9월에 발표했으며 처음에는 6to5라고 불렀다. 6to5는 ES6 문법으로 작성된 코드로 변환해주는 도구였다. 프로젝트가 커짐에 따라 ES6뿐 아니라 이후 발생한 에크마스크립트의 변화를 모두 지원해주는 플랫폼 역할을 하는 것으로 목표를 재설정했다. 또 바벨은 JSX를 순수 리액트로 변환하는 과정을 지원하도록 발전했다. 2015년 2월에는 이름을 바벨로 바꿨다.
자바스크립트 스펙으로 아직 확정되지 않은 Proposal 스펙이 5개의 Stage 로 구분되어 존재하는데, Babel 은 각각의 Stage 에 대해 Preset 을 제공한다.
아래의 Arrow Function (=>) 은 ES6 에서 추가된 함수 표현식으로, 화살표 표현식 (=>) 은 Javascript 의 Syntax 가 아니기 때문에 Javascript 가 읽을 수 있는 스크립트로 재 작성 되어 새로 트랜스파일 되어야 한다.
Babel 전
function addAdd(){
return Array.from(arguments).map(a => a + 2);
}
Babel 후
function addAdd(){
return Array.from(argument).map(function(a){
return a + 2;
})
}
바벨의 동작을 이해하는 아주 좋은 방법은 바벨 문서 페이지에서 바벨 REPL을 실행해보는 것이다.
바벨은 보통 웹팩이나 파슬과 같은 자동화된 빌드 도구에 의해 처리된다.
새로 추가된 전역 객체들(Promise, Map, Set)을 사용가능한 객체로 바꾸어주는 개념
브라우저 파편화를 해결하기 위해 지원하지 않는 공백을 매꾸는 스크립트나 기타 코드를 끼워넣어줌
예를들어 Promise 객체는 기존에 존재하지 않는 ES6 에서 추가된 객체로, ES6 이전에서 new Promise() 를 하는 경우 Javascript 의 Syntax 이지만 정의되지 않는 function 이라는 의미에서 'Promise is not a function' 의 결과를 보여준다.