1. Babel 이란?

1.1 Babel이란?

최신 사양의 자바스크립트 코드를 하위 사양(ES5 이하)의 코드로 트랜스파일링

// ES6 화살표 함수와 ES7 지수 연산자
[1, 2, 3].map(n => n ** n);

// ES5
"use strict";

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

1.2 Babel CLI 설치

# 프로젝트 폴더 생성
$ mkdir es6-project && cd es6-project
# package.json 생성
$ npm init -y
# babel-core, babel-cli 설치
$ npm install --save-dev @babel/core @babel/cli

Babel CLI 와 Core 설치

{
  "name": "es6-project",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2"
  }
}

package.json 파일 내용

1.3 .babelrc 설정 파일 작성

Babel을 사용하려면 @babel/preset-env을 설치해야 함

• @babel/preset-env : 필요한 플러그인들을 프로젝트 지원 환경에 맞춰서 동적으로 결정해줌
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

용어 정리

• CLI: Command Line Interface

참고 자료

• Babel과 Webpack을 이용한 ES6 환경 구축: https://poiemaweb.com/es6-babel-webpack-1