What is babel?

babel 이란?

• Babel is a JavaScript compiler.
• babel 은 javascript 로 결과물을 만들어주는 컴파일러 ( 소스 대 소스 컴파일러)

 

javascript 로 변환하는 과정이 왜 필요한가?

ESNext 문법을 기존의 브라우져에 사용하기 위해서 babel 은 필수적이다 왜내하면 예전 브라우져 예전 os 사용하는 경우가 많기 때문에 최신 문법으로 설계된 javascript 를 돌리기 위함이다.

 

 

polyfill 은 무엇??

• polyfill은 브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는것.
• babel 은 이러한 polyfill 을 손쉽게 지원하기 위해 babel-polyfill 기능을 지원
• babel 은 컴파일시에 실행되고 babel-polyfill 은 런타임에 실행

 

아래는 최근 브라우져 2가지의 버전만 지원하면서 IE의 경우 10버전 이하는 제외하는 설정

   {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "not ie <= 10"]
          }
        }]
      ]
    }

 

 

TypeScript와 JSX 지원

ES6 이상의 최신 문법 뿐만 아니라 TypeScript나 JSX로 작성된 코드를 변환할 때도 많이 사용

 

 

실습

실습 프로젝트 셋업

terminal 에서 npm project 를 생성한다

$ mkdir learn-babel
$ cd learn-babel
$ npm init -y

 

Sample Code 작성

before.js 를 아래와 같이 작성함

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

 

Babel 설치

@babel/core와 @babel/cli 패키지를 개발의존성(devDependencies)으로 설치 ( 빌드시에만 필요함)

$ npm i -D @babel/core @babel/cli

 

Plugin/Preset 설정

• Babel에게 플러그인(plugin)이나 프리셋(preset)을 통하여 문법 변환 규칙을 알려줌
• plugin은 규칙 하나 하나를 미세하게 적용할 때 사용하고 preset은 여러 개의 규칙을 한 번에 적용할 때 사용
• @babel/preset-env 패키지를 개발의존성(devDependencies)으로 설치 ( 빌드시에만 필요함)

$ npm i -D @babel/preset-env

 

Babel 설정 파일

project 단위에 .babelrc 파일을 생성 후에 다음과 같이 설정을 추가

{
  "presets": ["@babel/env"]
}

 

많이 사용되는 command 와 option 들

npx babel before.js      // compile 된 결과를  아래와 같이 출력함

 

$ npx babel before.js
"use strict";

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

 

npx babel before.js -o after.js    //  결과를 after.js 로 저장

 

npx babel src -d dist                  // src directory 의 모든 javascript file 을 변환하여 dist  에 저장함

 

 

정리

Babel이 이렇게 단독으로 사용되기도 하지만 프로젝트에서는 보통 Webpack이나 Rollup과 같은 번들러(bundler)와 함께 사용되거나 프레임워크의 일부로 포함된다.