Babel이란

자바스크립트는 매우 빠르게 발전하고있다. ECMAScript 2015, 2016, 2017, 2018 등등 거의 매년 새로운 스펙과 기능이 추가되어 왔다.
하지만 국내에서 아직도 많이 사용하는 IE 와 같은 구형 브라우저는 이런 새로운 기능을 지원하지 않기 때문에 예전 버전에 호환이 되는 코드를 작성할 필요가 있다.

따라서 최신 자바스크립트 문법을 모든 브라우저에서 사용할 수 있는 형태로 변환할 수 있는 transcomplier가 필요하게 되었고, 그중에서 가장 많이 사용되는 기술이 BABEL 이다.

프로젝트 폴더 생성 및 NPM 초기화

$ mkdir workspace/babel-demo
$ cd workspace/babel-demo
$ npm init

BABEL PACKAGE 설치

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

@babel/core : 바벨의 코어 패키지
@babel/cli :커맨드라인에서 파일을 컴파일하게 해주는 CLI 제공
@babel/preset-env : 구문변환에 대한 별도의 설정없이 최신 자바스크립트를 구형 브라우저에 사용할 수 있게 해주는 스마트 사전

babel.config.json 혹은 .babelrc 설정

프로젝트 루트폴더에 babel.config.json 혹은 .babelrc를 생성하고 해당 내용을 작성한다.

{
    “preset” : [
        “@babel/env”,
        {
            “targets”: {
                “edge” : “17”,
                “firefox” : “60”,
                “chrome” : “67”,
                “safari” : “11.1”,
            },
            “useBuitIns”: “usage”,
            “corejs” : “3.6.4"
        }
    ]
}

위에 targets에는 웹어플리케이션이 지원할 브라우저 목록과 버전을 작성하면 된다.

컴파일

바벨을 사용하는 방식에는 여러가지가 있지만 여기서는 cli를 사용하자. terminal 와 같은 커맨드 라인을 이용해서 babel을 실행시킨다.

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

./node_modules/.bin/babel : 실행 명령어
src : 컴파일하려는 소스 위치
--out-dir lib : 컴파일 완료된 소스가 위치하는 디렉토리

출처 및 참고

[Babel] Babel 의 역할, 기본적인 사용법 - 바로가기