Babel이란?
Babel
ECMAScript 2015+(ES6) 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러입니다.
크로스브라우징 이슈
먼저 크로스 브라우징(Cross Browsing)에 대해서 설명해야 할 것 같다. 크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 프론트엔드 개발자들에게 크로스 브라우징 이슈는 코드의 일관성도 망가트리고 혼란스럽게 만드는 요소 중 하나이다.
이러한 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이 바벨이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할을 한다. 바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만든다.
출처 - https://devowen.com/293
설치하기
npm i -D @babel/core @babel/preset-env
.babelrc.js
module.exports = {
presets: [ '@babel/preset-env' ],
plugins: [
['@babel/plugin-transform-runtime']
]
}async function test() { //비동기 함수
const promise = Promise.resolve(123)
console.log(await promise)
}
test()npm i -D @babel/plugin-transform-runtime
(트랜스폼 런타임 패키지를 설치하여 async, await 문법을 브라우저에서 인식할수있게)
nmp run dev
함수가 정상적으로 동작하는지 (트랜스파일링이 됐는지)
Polyfill
폴리필은 런-타임에 필요한 기능을 주입하는 것입니다. 다시말해 브라우저에서 실행되는 시점에 필요한 기능을 주입한다는 것인데요
먼저 Babel에 대해서 보면 Babel은 구 브라우저에서도 최신자바스크립트 코드를 작동하도록 변환해주는 컴파일러(혹은 트랜스파일러)입니다.
Babel은 컴파일-타임에 코드를 구 브라우저에서 사용가능하게 변환하지만, ES6이상에서 새롭게 추가된 Promise, Map, Set 같은 전역객체들이나 String.padStart등 전역 객체에 추가된 메서드등 컴파일-타임의 코드변환으로는 해결하기 어렵기 때문에 폴리필(polyfill) 이 필요한 것입이다.
즉, 구 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 Babel을 이용했지만, 일부 기능들은 polyfill로 추가해줘야 하는 것입니다.
폴리필 사용법 https://velog.io/@kwonh/Babel-%ED%8F%B4%EB%A6%AC%ED%95%84polyfill-babelpreset-env
출처
https://velog.io/@surim014/Babel-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-1-Babel-Polyfill%EC%9D%B4%EB%9E%80
https://ykss.netlify.app/web/babel/
https://bravenamme.github.io/2020/02/12/what-is-babel/
https://velog.io/@leehyunho2001/Babel
