2015-03-16 babelでES6の構文を体験してみる

やっとbabelを試してみることができたのでメモ。

package.json

以下のような感じ。

{
  "private": true,
  "scripts": {
    "start": "awk '{ print }' *.es6.js | babel -t -f es6.js -o index.js"
  },
  "devDependencies": {
    "babel": "*"
  }
}

$ npm startでES6のコードをES5向けのコードに変換する。

a.es6.js

const BLACK = '#000000',
      WHITE = '#ffffff';

b.es6.js

let obj = {
  method() {
    console.log(BLACK);
    console.log(WHITE);
  }
};

obj.method();

c.es6.js

[1, 2, 3, 4, 5].forEach(val => console.log(val));

index.js

a.es6.jsとb.es6.jsとc.es6.jsを連結して変換したファイルは以下の様になる。

"use strict";

var BLACK = "#000000",
    WHITE = "#ffffff";
var obj = {
  method: function method() {
    console.log(BLACK);
    console.log(WHITE);
  }
};

obj.method();
[1, 2, 3, 4, 5].forEach(function (val) {
  return console.log(val);
});

//# sourceMappingURL=data:application/json;base64,...

実行すると正常に動作する。

$ node index.js
#000000
#ffffff
1
2
3
4
5

とても簡単にES6の機能を（今回は簡単なものしか使用していないが）現行のブラウザでも実行できるようにしてくれる。 Proxiesのようなものはやはり難しいようだが。

それでもconstやletだったり、ArrowsやTemplate Stringsが記述できるだけでも今より良くなると思う。これから使っていきたい。