ひよこ3:07のTechブログ

ES6をES5に変換するesnextを試してみた

2014-04-23javascript

esnext

Squareが作ったECMAScript6コンパイラ、esnextの名前を最近わりと聞くので試してみた。

READMEによるとbroccoliみたいなビルドツールと一緒に使うのを目指しているらしい。

ES6をES5に変換するnodeモジュールで、npmでインストールできて、require('esnext')で使える。

$ npm install esnext

var esnext = require('esnext');

変換してみる

モジュールのcompile()という関数で変換できる。簡単。

var es6 = 'var a = () => 1;';
var es5 = esnext.compile(es6);

es5.code // => "var a = function() {\n  return 1;\n};"

transform()関数はesprimaで吐き出されたASTを変換する。

compile()もtransform()も第2引数にオプションを指定できる。{ arrowFunction: false }を渡せば(() => 1)のような関数を変換しなくなる。他の機能も全部無効にできるよう作られている。将来機能が実装された時に簡単に無効にできるように、ってことかな。

SourceMap

オプションにソースの名前とかを渡すとSourceMapを吐いてくれる。

var compiled = esnext.compile('(() => 1)', {
    sourceFileName: 'es6.js', // ソースの名前
    sourceMapName: 'es5.js' // 変換後の名前
});

compiled.map; // SourceMapのオブジェクト

このままだとただのオブジェクトだからJSON.stringify()してファイルに保存するなり、サーバのレスポンスにするなりが必要。Data URLにして埋め込んじゃうのが簡単そう。[参考]

var code = compiled.code +
  '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
  new Buffer(JSON.stringify(compiled.map)).toString('base64');

// codeを保存するなり(ry

これでDevToolsでブレークポイントとか使える。Error().stackはちゃんと取れなかった。自分のやりかたが悪かったのか、そもそもできないのか。

他との違い

Googleのtraceur-compilerなんかはガチムチな感じで、いろいろやっている。ソースも追いにくくて、どのコードが何をしてるのかわかりづらい。

esnextはソースコードがすごいシンプルで、実際の変換はすべて機能毎に他のモジュールに投げてしまっている。ハックのやりやすさとか、コードの読みやすさが利点かな。対応する機能を増やしたりするのも、こっちのほうがやりやすそう。

弱点としては、まだ対応している機能が限られていたり、ブラウザ上では動かないこととかがあるかも。