[Babel]_Babel 과 Babel-polyfill 이란?

개요

 

프론트 개발을 하면서

()=> ( 화살표 함수 )

`` ( 템플릿 코드 )

forEach

filter 

 

등 최신문법을 사용하여 개발하였습니다.

 

IE 테스트 단계에서 문제가 발생했습니다.

IE의 경우 ES6 이상의 문법을 사용하게 되면 오류가 발생합니다.

 

한국에서는 공공기관의 경우 Active X 사용으로 인해 Internet Explorer 의 사용 비중이 높습니다.

따라서 IE 환경도 고려를 해야 합니다.

 

이를 해결할 수 있는 방법이 Babel, Babel-Polyfill 사용입니다.

---

1. Babel

 

Babel 은 자바스크립트 컴파일러 입니다.

 

컴파일이란 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정입니다.

즉 Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ ( = ES6 ) 코드를

이전 버전의 JavaScript로 변환하여 주는 컴파일러 혹은 트랜스파일러 입니다.

 

바벨은 파일 파싱, 출력을 담당하고

바벨 플러그인이 변환을 담당합니다.

 

바벨 플러그인이란 바벨이 어떤 코드를 어떻게 변환하는지에 대한 규칙이 들어있습니다.

 

따라서 바벨은 플러그인과 같이 사용하게 되고

공식 사이트, 및 구글링으로 손쉽게 플러그인을 찾을 수 있습니다.

또한 커스터마이징 할 수도 있습니다.

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

---

2. polyfill

https://babeljs.io/docs/en/babel-polyfill/

Babel · The compiler for next generation JavaScript

폴리필은 js 가 런타임 시에 필요한 기능을 주입하는 역활을 합니다.

 

babel-polyfill

 

bebel이 변환을 하였어도 ES6 이상 버전에서 추가된 Promise, Map 등 신 문법은 바꿔주지 못합니다.

 

Babel-polyfill은 ES6이상 문법에서 추가된 객체, 메소드 등을 실행 환경에서 제공하는 역활을 합니다.

 

---

Webpack, Rollup 또는 Parcel과 같은 Node.js에서 실행되는 프로젝트인 경우

npm 등에서 babel과 plugin, babel-plyfill 등을 다운받고 사용하면 됩니다.

 

 

감사합니다.