[Babel] Babel: ES6 -> ES5 へトランスコンパイルする

Babel v6.x では、.babelrc に Preset を設定する必要があった。
バージョンアップ前と手順が変わっていて、はまってしまった。。。

[markdown]
npm のみを利用。
以下の手順でインストールされた babel のバージョンは 6.6.5。

“`prettyprinted
% $(npm bin)/babel –version
6.6.5 (babel-core 6.7.4)
“`

## ファイル構成

Sample ファイルを src/basic.es6 に設置。

“`prettyprinted
.
├── lib
├── package.json
└── src
└── basic.es6
“`

“`javascript:src/basic.es6
[1, 2, 3].map(n => n + 1);
“`

## babel-cli のインストール

“`prettyprinted
% npm install –save-dev babel-cli
“`

### 実行

CLI で実行する。

“`prettyprinted
% $(npm bin)/babel src/ -d lib/ -s
“`

結果を確認すると、トランスコンパイルされていない。

“`javascript:lib/basic.js
[1, 2, 3].map(n => n + 1);
//# sourceMappingURL=basic.js.map%
“`

## babel-preset-es2015 のインストール

手順を確認したところ、.babelrc に babel-preset-es2015 を設定する必要があった。

> * [Using Babel · Babel](https://babeljs.io/docs/setup/#babel_cli)

“`prettyprinted
% npm install babel-preset-es2015 –save-dev
“`

さらに `.babelrc` を作成。

“`prettyprinted
% echo ‘{ “presets”: [“es2015”] }’ > .babelrc
“`

Preset は必要なプラグインをあらかじめ呼んでくれる機能のようだ。
es2015 以外に react も用意されている。

> * [Plugins · Babel](http://babeljs.io/docs/plugins/#presets)

### 実行

CLI で実行する。

“`prettyprinted
% $(npm bin)/babel src/ -d lib/ -s
“`

無事トランスコンパイルされた。

“`javascript:lib/basic.js
“use strict”;
[1, 2, 3].map(function (n) {
return n + 1;
});
//# sourceMappingURL=basic.js.map%
“`

## 補遺

Pluings/Presets について。

> * [babelifyでv7.x系を利用する – to-R](http://blog.webcreativepark.net/2015/11/06-181413.html)
> * [Babel6でクラス継承をIE9に対応する | WebDesign Dackel](http://webdesign-dackel.com/2016/02/03/babel6-class-ie9/)
[/markdown]