ES6をBabelでコンパイル

引用記事

Javascriptの新基準であるES6（ES2015=ECMAScript2015）を利用する方法としてBabelによるコンパイルがある。
なぜコンパイルが必要かは、すべてのブラウザがES6に対応していないから。

Babelの使い方

babel-cliをインストール

// プロジェクトフォルダへ移動
cd myproject

// package.jsonを作成
npm init
（色々聞かれるので全てEnter）

// babel-cliをインストール
npm install --save-dev babel-cli

.babelrcを作成

プロジェクトフォルダのルートにBabelの設定ファイルである.babelrcを作成。

利用するPresetをインストールし、.babelrcで設定

ES6からES5にコンパイルしたい場合は、babel-preset-es2015というPresetをインストールし.babelrcへ記述する。

// babel-preset-es2015をインストール
npm install --save-dev babel-preset-es2015

// 下記を.babelrcへ記述
{
  "presets": ["es2015"]
}

コンパイル

./node_modules/.bin/babel es6.js

コンパイルした結果を別ファイルとして保存したい場合、 -oをつけて出力先のファイル名を指定

// es6.js → main.js にコンパイル
./node_modules/.bin/babel es6.js -o main.js

ソースファイルの変更を常にウォッチして、変更があれば自動的にコンパイルしたい場合は-wを付ける。

// es6.js → main.js にコンパイル（ウォッチ）
./node_modules/.bin/babel es6.js -w -o main.js