Babel이란?

Babel이란 ?

바벨(babel)이란 주로 오래된 환경이나 브라우저에서 ES6를 정상적으로 작동시키기 위해 이전 버전의 Javascript로 변환해주는 역활을 한다.

ES6가 나온 시기는 2015.06이지만 각 브라우저들이 ES6를 지원한 시기는 다음과 같다.

사진에서 보다시피 ES6가 나온시기와 브라우저들이 ES6를 지원한 시기 사이에는 1년가까운 공백들이 존재한다.

그렇다면 그 1년동안 개발자들은 ES6를 사용하지 않았을까?

당연히 그렇지않다! 개발자들은 Babel을 사용하여 ES6문법을 사용할 수 있었다.

Babel 사용법

다음과 같이 ES6문법인 화살표함수가 있을 때, 이것을 이전 버전의 자바스크립트 문법으로 변경하려면 다음과 같은 플러그인이 필요하다.

const fn - () => "테스트입나다."

@babel/core : 바벨의 핵심적인 기능
@babel/cli : 터미널로 바벨을 사용
@babel/plugin-transform-arrow-functions : 화살표 함수를 transform하는 플러그인

----> 변경

var fn = function fn(){
	return "테스트입니다."
}

그런데 ES6에서는 화살표함수뿐 만이아니라 let, const등을 포함하여 많은 문법이 추가되었다.

이 많은 문법들을 위해 매번 plugin을 설치하는 것은 너무 비효율적이다.

그러므로 대부분은 config파일(babel.config.json or babelrc.json) 혹은 Preset을 활용한다.

Polyfill

폴리필은 구형브라우저에서 자체적으로 지원하지 않는 최신기능들을 지원하고자 가져오는 코드 뭉치이다.

https://www.youtube.com/watch?v=o-5K5Sc7L1k