[툴] babel

https://babeljs.io/

Babel · The compiler for next generation JavaScript

이 글은 위 링크에서 기본적인 바벨 사용법을 번역한 글입니다. 

자바스크립트 번역컴파일러 

ECMA2015이상의 프로젝트를 그 이하 버젼으로 변환해주는 툴체인으로 

최근부터 예전의 브라우저나 환경 모두에서 최신의 자바스크립트를 사용할 수 있게 해준다. 

 

바벨의 주요 기능 

• 구문의 변형 (버전마다 다른 문법의 차이를 각 버젼에 맞게 맞춰줌)
• core-js와 같은 서드파티 폴리필을 통해 대상 환경에서 손실된 특징들을 채워준다. 

※ polyfill 폴리필 : 기능을 지원하지 않는 브라우저에서 기능을 실행하도록 구현한 코드 

• 소스 코드의 변형 등등

바벨이 지원하는 언어

• ES2015+ 이상의 최신 자바스크립트 : 구문변형을 통한 지원
• JSX 그리고 리액트 : React preset과 bebel-sulime패키지를 함께 사용하면, 완전히 새로운 레벨에서 각광받는 구문을 가져올 수 있다. 

react preseet설치
npm install --save-dev @babel/preset-react

• 타입스크립트, 플로우등 

특징 

• pluggable : 바벨은 플러그인으로 만들어져 기존 플러그인을 사용한 변환을 통해 사전 설정이나, 플러그인 묶음을 만들어 활용이 가능하다.
• debugger : 디버깅 가능 / 소스 맵지원
• Spec Compliant : 사용준수 합리적으로 가능한 수준에서 ECMA 표준을 준수, 스펙을 지키기위한 옵션존재 
• compact : 가능한 최소한의 코드를 사용

사용법 

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

Babel · The compiler for next generation JavaScript

설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env

설정

1번(v7.8.0이상) 또는 2번(v7.8.0이전) 방법 둘 중 하나만 수행

1. 프로젝트의 루트위치에 babel.config.json파일 생성 (v7.8.0 이상) 

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

preset-env는 바벨의 사전 환경설정으로 target은 지원하고자 하는 브라우저에 맞게 설정하면된다. 

2. babel.config.js (7.8.0이전 버젼일 경우)

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

module.exports = { presets };

src에서 lib로 모든 코드들을 컴파일 하고자 할 때 

./node_modules/.bin/babel src --out-dir lib

npm버전이 5.2.0이상일 경우 npx사용가능

npx babel src --out-dir lib

CLI환경에서 기본적인 사용법

version7부터 필요한 모든 바벨모듈은  @babel스코프 아래의 분리된 npm 패키지로 배포된다. 

이 모듈러 디자인은 지정된 사용방식을 위해 구상되어진 다양한 도구들을 허용한다. 

1. @babel/core babel의 주요 기능을 위한 코어 라이브러리 

설치 

npm install --save-dev @babel/core

사용

const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

2. @babel/cli : 터미널 환경에서 바벨을 사용할 수 있도록 하는 라이브러리 

설치

npm install --save-dev @babel/core @babel/cli

사용 src의 모든 파일을 lib디렉토리로 컴파일하라는 명령어

./node_modules/.bin/babel src --out-dir lib

src에 있는 모든 자바스크립트들을 파싱하고 구문을 변형하여 lib디렉토리에 각 파일들을 출력한다. 

아직 변환 적용 전이기에 출력코드와 입력코드의 내용은 동일 

3. 변환을 위한 플러그인 설치 

변환은 코드 변환을 수행하는 방법을 지정한 작은 자바스크립트 프로그램인 플러그인의 형태로 이뤄진다. 

본인이 직접 플러그인을 작성하거나 공식 플러그인을 설치해 사용할 수 있다. 

공식 플러그인 @babel/plugin-transform-arrow-functions의 설치예 

npm install --save-dev @babel/plugin-transform-arrow-functions

@babel/plugin-transform-arrow-functions의 실행예 

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

실행결과 

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

 

4. @bable/preset-env 환경에 따른 설정된 사전 설정집 적용

preset-env를 이용하면 필요한 플러그인을 하나하나 설정할 필요없이 환경에 따른 설정을 적용할 수 있게 된다.

npm install --save-dev @babel/preset-env //설치

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env // 적용

 

5. babel.config.json(v7.8.0이상)  

7.8.0이전 버전은 babel.config.js 작성

버전에 따른 사전설정을 적용하기 위해 각 preset-env의 환경을 설정하는 설정을 한다.

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

이 설정을 하면 환경에 대한 사전 설정이 대상 브라우저들에서 이용불가능한 것을에 대한 변형 플러그인들을 불러온다.

5.  polyfill 브라우저에서 지원되지 않는 기능을 실행하도록 하는 코드 

@babel/polyfill모듈은 완벽한 ES2015+ 환경을 모방하도록 만들어진 regenerator runtime과 core-js를 포함한다. 

(@7.4.0부터는 바벨이 ECMA를 폴리필하기 위해 직접 core-js와 regenerator-runtime을 지원하므로 해당 모듈이 없어졌다.)

이에 따라 자바스크립트의 Promise, WeakMap등 최신 자바스크립트의 기능을 사용할 수 있다

다만 이를 위해 글로벌 영역에 추가 되므로, 인스턴스 메서드가 필요하지 않고, 글로벌 범위에 영향을 끼치고 싶지 않다면,  transform runtime 플러그인을 사용할 수 있다.

polyfill을 사용하기 위해서는 @babel/polyfill만 설치하면됨