1. 탐구

Babel

: ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는Javascript 트랜스 파일러

• 엄밀 말하면 컴파일러는 아님
  • 컴파일러 : 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 프로그램을 의미
• babel은 컴파일시에 실행되고, babel-polyfill은 런타임에 실행이 된다.
  • polyfill : 오래된 브라우저에 네이티브로 지원하지 않는 사용자가 사용하는 메서드, 속성, API가 존재하지 않을 때 추가
  • 프로그램이 처음 시작될 때 지원하지 않는 기능들을 추가하는 것

1. ES6+ 버전 이상의 Javascript → ES5버전 이하의 Javascript

• @babel/preset-env

• 최신 기능을 제공한다면, 변환하지 않음

• before (ES6 문법)

  [1, 2, 3].map((n) => n + 1);
  

• after (ES5 이전 문법)

  [1, 2, 3].map(function (n) {
    return n + 1;
  });
  

2. JXS → Javascript

• babel/preset-react

• JSX 코드 → Javascript의 React.createElement(…)로 변환

• before(JSX)

  const simpleButton = (
    <button type="submit" onClick={() => alert("클릭")}>
      제출
    </button>);
  

• after(JS)

  const simpleButton = React.createElement(
    "button",
    {
      type: "submit",
      onClick: () => alert("클릭"),
    },
    "\uC81C\uCD9C"
  );
  

3. Typescript → Javascript

• babel/preset-typescript