[babel이란]

• ES6 / ES7 코드를 ES5 코드로 트랜스파일링 하기 위한 도구

[babel cli , babel core 설치]

• babel cli : 커맨드라인에서 바벨 사용할 수 있게해준다
• babel core : 바벨 컴파일러 코어

$ npm install --save-dev @babel/core @babel/cli // 전역이 아닌 로컬로 설치

$ babel example.js --out-file compiled.js // 이렇게 컴파일 가능

[babel preset env 설치]

• 바벨을 실제로 동작케하는건 plugin
• babel/preset-env는 여러 plugin들을 포함한 번들

$ npm install --save-dev @babel/preset-env

// @babel/preset-env
// @babel/preset-flow
// @babel/preset-react
// @babel/preset-typescript

// 공식 지원하는 preset들

// .babelrc 파일 생성 후 작성

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

[트랜스파일링 설정]

{
  "name": "es6-project",
  "version": "1.0.0",
  "scripts": { // npm script 에 command line 설정
    "build": "babel src/js -w -d dist/js"
		// -w : -watch 옵션의 축약, 해당 폴더에 있는 모든 파일의 변경감지
		// -d : --out-dir 옵션의 축약, 트랜스파일링된 결과물이 저장될 폴더지정
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1"
  }
}

[추가 Babel plugin 설정]

// 원하는 plugin 설치

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