Babel 사용법 ① - Babel 단체로의 이용

이제 하지만 ES6 공부를 시작했습니다.
비망록으로서 환경 구축 방법이나 용어 등을 메모해 갑니다.
시작하려면 Babel 단독으로 환경을 만듭니다.

Babel 단체에서의 이용

Babel built-ins -> CLI

전제로 node.js가 전역 설치되어 있다고 가정합니다.

적절한 디렉토리를 준비

$ mkdir babel_test/cap1
$ cd babel_test/cap1

Babel 글로벌 설치

$ npm i -g babel

package.json 만들기$ npm init 에서 대화식으로 다음과 같은 파일을 만들었습니다 ↓

package.json

{
  "name": "babel-test-built-ins",
  "version": "1.0.0",
  "description": "hoge",
  "repository": "piyo",
  "main": "index.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

실수는 description이라든지 repository가 비어 버려도 sudo vi package.json로 편집 할 수 있습니다.
(자신의 환경이라면 read-only인 package.json이 생성되었습니다)

Babel 명령 줄 도구 설치

 $ npm i -D babel-cli

es2015 트랜스 파일 플러그인 설치

$ npm i -D babel-preset-es2015

.babelrc 만들기

 $ touch .babelrc
 $ echo '{ "presets": ["es2015"] }' > .babelrc

컴파일 원본 파일 만들기
기본 파라미터와 애로우 함수를 이용.

src/sample_es6.js

 setTimeout((hoge = "ほげ") => {
        console.log(hoge);
 }, 500);

컴파일하기

 $ pwd # -> ~/babel_test/cap1
 $ babel src/sample_es6.js -o dest/sample.js

일단 컴파일 결과

 'use strict';

 setTimeout(function () {
        var hoge = 'ほげ';
        console.log(hoge);
 }, 500);

디렉토리를 일괄 지정해 컴파일하는 일도 가능

$ babel src -d lib

또는 다음을 추가하여 ↓

package.json

{
　　...略...
  　"scripts": {
        "build": "babel src -d dest"
  　},
}

$ npm run build 

watch도 할 수 있어 ٩( ‘ω’ )و

package.json

{
　　...略...
　　"scripts": {
　　  "build": "babel src -d dest",
　　  "start": "babel -w src -d dest"
　　  }
}

$ npm run start 

(배경이 스케스케인 것은 신경쓰지 않고)

포착

npm -i: install 바로 가기
npm -D: --save-dev
babel -o:--out-file
babel -d:--out-dir
babel -w:--watch