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

• before(Typescript)

  const x: number = 0;

• after (Javascript)

  const x = 0;

Typescript를 Javascript로 변환하는데는 바벨도 가능하지만, Typescript 컴파일러 성능이 더 좋아 이를 보통 사용한다.

Babel 동작 원리

1. Parsing : 소스 코드를 분석해 AST(Abstract Syntax Tree)로 변환
   • @babel/parser의 parse함수 사용
2. Transformation : AST를 브라우저가 지원하는 오래된 문법으로 AST를 변경
   • @Babel/traverse를 사용하여 AST를 순회
3. Code Generation : 새로운 AST를 바타응로 새로운 코드 생성
   • @babel/generator

Babel 주요 모듈

1. @babel/core : babel의 핵심 기능이 있는 모듈
   1. parsing, traverse, generator를 한 번에 처리할 수 있는 함수를 제공
2. @babel/cli : @babel/core에 대한 인터페이스 역할
3. @babel/preset-env : 모던 JS를 지원하기 위한 모든 플로그인의 집합

2. 실습

1. babel 환경 세팅

• 참고 : 공식문서

1. 모듈 설치

   $ npm install -D @babel/core @babel/cli @babel/preset-env

2. babel.config.json

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "edge": "17",
             "firefox": "60",
             "chrome": "67",
             "safari": "11.1"
           },
           "useBuiltIns": "usage",
           "corejs": "3.6.5"
         }
       ]
     ]
   }

2. babel 실행

1. babel 실행

   $ npx babel src -d dist : src폴더 내의 파일들이 babel이 실행되어 dist폴더에 들어간다. 이 때, 아무런 설정을 하지 않았기에 아무런 변화가 없을 것이다.

2. @babel/plugin-transform-arrow-functions plugin(화살표 함수 변환) 사용

   $ npm i -D @babel/plugin-transform-arrow-functions

   $ npx babel src -d dist --plugins=@babel/plugin-transform-arrow-functions

   • 기존

     // src/index.js
     const b = [1, 2, 3, 4, 5];
     console.log(b.map((item) => item * 2));

"use strict";

const b = [1, 2, 3, 4, 5];
console.log(b.map(function (item) {
  return item * 2;
}));

3. preset plugin 사용
   • preset은 미리 정해진 플로그인 집합으로, 코드에 존재하는 다른 ES6 기능에 대한 플러그인을 따로 추가하지 않아도 된다.

3. polyfill

: 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트

1. npm i core-js

   • @babelpolyfill은 더이상 사용되지 않고, core-js에서 필요한 polyfill을 직접 import하여 사용할 수 있다.

2. 필요한 polyfill을 import하여 사용

   import 'core-js/actual/array/from';
   import 'core-js/actual/array/group';
   import 'core-js/actual/set';
   import 'core-js/actual/promise';
   import 'core-js/actual/structured-clone';
   import 'core-js/actual/queue-microtask';

Reference

bookmark

bookmark