Code → Transpiler → Packaging(Bundling) → CI(test 등) → Deploy

과정에서 Transpiler 과정을 수행해주는 도구이다. 플랫폼(환경)별 차이를 최소화하기 위한 크로스 브라우징 작업을 수행해준다.

개발에 사용한 JS 버전이 브라우저의 지원 버전보다 높은 경우, 바벨을 이용하여 낮은버전의 JS로 트랜스파일링하여 호환성을 유지, 브라우저에서 해석할 수 있도록 한다.

최신버전의 JS 함수들까지 트랜스파일하는 것은 아니며, polyfill 을 사용하여 최신 ECMAScript 환경을 만들 수 있다.

• 코드가 실행되는 환경에 존재하지 않는 빌트인 및 메소드 추가

결론적으로

1. babel 은 컴파일 시에 실행하여 하위버전의 JS로 호환성을 지켜주고
2. babel-polyfill 은 런타임 시에 실행하여 하위버전의 JS의 빌트인과 메소드를 추가시켜 최신 함수를 사용가능하도록 한다.