Babel과 polyfill

 

Babel

바벨은 자바스크립트 컴파일러이다 . ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는데 주로 사용되는 도구 체인이다.

아래는 바벨이 할 수 있는 주요 기능이다.

 

   - 변환 구문

   -  대상 환경에서 누락된 폴리필 기능(core-js와 같은 폴리필을 통해)

   -  소스 코드 변환(codemods)

 

// Babel Input: ES2015 arrow function 
[1, 2, 3].map(n => n + 1); 

// Babel Output: ES5 equivalent 
[1, 2, 3].map(function(n) {
 return n + 1; 
});

 

JSX 에서의 Babel

 

다음과 같은 커맨드 명령어로 설치 할 수 있다.

npm install --save-dev @babel/preset-react

 

Babel은 JSX 구문을 변환할 수 있다. 

 

@babel/preset-reactBabel 구성 에 추가 하고.

 

export default function DiceRoll(){
  const [num, setNum] = useState(getRandomNumber());

  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  return (
    <div>
      Your dice roll:
      {num}
    </div>
  );
};

이와 같은 JSX 구문도 변환 가능하다.

 

 

---

Polyfill

 

폴리필(Polyfill)은 최신 ECMAScript 환경을 만들어준다. 바벨은 ES6=> ES5로 변환할 수 있는 것들 만 변환을 하는데, ES6에서 비동기 처리를 위해 등장한 Promise와 같이 ES5에서 변환 할 수 있는 대상이 없는 경우 에러가 발생한다.

이러한 경우 Polyfill을 이용해 이슈를 해결 할 수 있다.

 

마무리 

간단히 말하면 바벨과 폴리필 모두 최신 기술을 지원하지 않는 브라우저 지금은 ie를 지원하지 않음으로.. 브라우저별 호환을 지원해주고, 이전 버전의 코드를 사용하여 기능을 동작하게 된다. react CRA 같은 경우는 이미 설정이 되어있어서 적용이 된다. 브라우저 호환을 위해선 알아둬야할 개념이다.

 

 

 

출처

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