preco21/babel-6.md

## babel-6.md

      
    Raw
  

              babel-6.md
            
          
    Babel 6.x 가이드

Babel은 최신 ES(2015/NEXT) 표준에 맞춰 작성된 코드를 아직 표준 기능을 구현하지 않은 브라우저와 플랫폼에서도 코드가 작동할 수 있도록 만들어주는 코드 transpiler와 polyfill 도구의 집합입니다.
Babel 6.x 버전부턴 많은 기능이 추가되었고 운용 방식이 설정(config) 기반 방식으로 바뀌었습니다.

BabelJS

설치와 사용

다음 명령을 통해 babel과 babel-node REPL을 전역 패키지로 설치합니다.
npm install babel-cli -g
참고: package.json에 포함하여 scripts 필드에서 사용하고 싶다면 -g 대신 -D 플래그를 통해 개발 종속성 형태로 설치합니다.
REPL

babel-node 명령으로 Babel REPL을 실행할 수 있습니다. 이 명령은 Node.js REPL과 유사하며 실행된 디렉터리의 .babelrc에 따라 transform이 적용됩니다. 이 명령을 통해 코드를 바로 실행해 볼 수 있습니다.
하지만 babel-node를 통한 코드 실행은 명령을 실행할 때마다 소스가 디렉터리 내의 .babelrc에서 지정한 transform에 따라 transpile되고 polyfill이 기본으로 포함되기 때문에 최초 실행 속도가 느리며 매우 무겁습니다. 따라서 실제 production 코드는 미리 babel 명령을 통해 transpile 해 놓고 사용하는 것이 좋습니다.
babel-node code.js
코드 컴파일

babel 명령을 통해 소스를 transform에 따라 transpile 할 수 있습니다.
Babel 6.x 부터 .babelrc가 필수로 바뀌었으며 필요한 transform 기능과 플러그인을 담은 npm 모듈 추가하여 사용해야 합니다.
다음 예시는 preset 기능을 통해 ES2015와 Stage 0의 기능이 포함된 프리셋 패키지를 npm으로 설치한 후 컨픽을 작성합니다:
npm install babel-preset-es2015 babel-preset-stage-0 -D
.babelrc:
{
  "presets": [
    "es2015",
    "stage-0"
  ]
}

여기까지 작성하면 다음 명령으로 코드를 transpile 할 수 있습니다:
babel index.js -o compiled.js
참고: watch를 실행하려면 -w 옵션을, source map을 뽑아낼려면 -s 옵션을 명령에 추가하면 됩니다.
Polyfill 추가

Babel Polyfill을 통한 방법

다음 명령은 babel-polyfill을 설치합니다. 이 polyfill은 코드에 직접 포함 시켜야합니다. 이 polyfill은 각 객체의 prototype과 메서드를 Monkey Patching 하므로 전역 스코프를 오염시킵니다.
npm install babel-polyfill -S
entry.js:
import 'babel-polyfill';
import './index';
index.js:
const NUM = 123;
console.log(Number.isInteger(NUM));
Babel Runtime을 통한 방법

위 polyfill을 통한 방법은 강력한 방법이긴 하지만 전역 스코프를 오염시킵니다. 따라서 라이브러리 모듈이나 polyfill 조차 필요하지 않은 간단한 어플리케이션을 작성할 때는 적합한 방법이 아닐 수 있습니다.
하지만 기본적인 babeljs의 런타임 코드나 Map, Set, Array.from()과 같은 static 메서드나 빌트인 클래스는 transform-runtime 플러그인과 babel-runtime을 통해 계속 역할을 수행 하도록 만들 수 있습니다.
npm install babel-plugin-transform-runtime -D && npm install babel-runtime -S
.babelrc:
{
  "presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": [
    "transform"
  ]
}

기타


기본적으로 transform 플러그인들은 모두 syntax 플러그인을 포함합니다.
syntax 플러그인은 transform을 제외한 문법만 처리합니다.
.babelrc의 정확한 인코딩은 정해지지 않았지만 UTF-8로 하는것이 좋습니다.
기존의 babel-core/polyfill이 babel-polyfill 패키지로 이전되었습니다.
babel-polyfill과 babel-runtime에 대해 부가 설명을 하자면, 간단히 polyfill은 모든 기능이 작동할 수 있도록 처리하며 runtime은 일부 필수 기능과 babel의 런타임 코드만을 처리합니다. 따라서 webpack 또는 browserify 등을 통한 프론트 엔드 코드나 node 서버는 polyfill을 사용해도 문제가 없기 때문에 가능하면 사용하는 것이 좋지만, 가볍게 작동해야 하는 라이브러리 모듈은 runtime을 선택해야 합니다.
ES2015 기능 중 하나인 generator는 regenerator runtime이 반드시 필요하므로 polyfill과 runtime 중 하나는 반드시 사용해야 합니다.