Babel, Babel Preset, Polyfill에 대하여

babel

정의 

자바스크립트는 인터프리터 언어이다. 즉, 브라우저가 코드를 해석하기 때문에 컴파일할 필요가 없다.

그러나 모든 브라우저가 ES Next(ES6 이상)를 지원하지 않는다. 그리고 어떤 브라우저도 JSX를 지원하지 않는다. 

bable은 ES Next, JSX를 다양한 호스팅 환경에서 사용할 수 있도록 지원하는 컴파일러이다. 

 

목적 

ES6 이후의 코드를 호환 가능한 코드(ES5)로 변환하여 다양한 호스팅 환경에서 사용할 수 있게 해 준다. 

• ES5 : 모든 브라우저에서 지원
• ES6 : 대부분의 브라우저에서 지원
• ES7~ : 호환성이 떨어짐 

기능 

• Syntax 변환
• Polyfill 
• 소스코드 변환

 

babel preset 

바벨은 처리할 수 있는 변환의 종류를 프리셋(preset) 모듈로 분리했다. 개발자는 사용할 프리셋을 지정하여 바벨이 처리할 변환의 종류를 명확히 정의할 수 있다. 

 

많이 쓰이는 프리셋 

• babel-preset-env : ES Next를 ES5로 컴파일한다.
• babel-preset-react : jsx를 Reac.createElement 호출로 변경한다. 

 

Polyfill

정의 

호스팅 환경에서 지원하지 않는 CSS, JS 스펙에 대한 호환 가능한 코드 조각이다. 

 

목적 

Babel은 그 자체만으로 Promise, Object.assign, Array.from, Array.prototype.includes 등을 변환할 수 있다. ES5에는 Promise, Object.assign이 없는 문법이기 때문이다. 따라서 Polyfill을 이용하여 호환 가능한 코드로 변환해서 사용할 수 있다. 

Babel은 core-js, regenerator 플러그인을 통해 Polyfill 기능을 제공하고 있다.