babel-preset-env便利すぎわろた

ES6の文法をbabelでJSにトランスパイルするとき、ES5の文法に変換されるじゃないですか。

ブラウザが実行するクライアント用のものなら問題ないんですが、Node.jsで実行する場合はV8が大抵のES6文法に対応しているので対応していないものだけ変換してほしいですよね。

でもNode.jsのバージョンによってV8のバージョンも違うし、つまり対応している文法の範囲も違うからそんな都合のいいものなんかないよなぁ…ましてやbabelプロジェクトの公式なんかじゃ絶対ないよなぁ…

あった。

タイトルで完全にネタバレしていますが、babel-preset-envとかいうやつをbabelの公式に発見。最初のコミットが去年の8月ということはかなり新しいやつだね。

検索しても日本語の情報がまだ少ないのでこのエントリが一助となれば。

何ができるの？

変換したい対象の処理系を指定すると、処理系のES6対応表を使って非対応機能だけをトランスパイルしてくれるんですって。

つまり、「これはNode.js 6.0で動かすから、それが対応していない文法だけ変換して！」とか「これはブラウザで動かすから、IE9以降・Firefox45以降・Chrome50以降に対応していない文法だけ変換して！」とか指定できるらしい。なにそれ便利すぎ。

さらに、バージョンを直接指定しなくても、「今実行しているNodeのバージョンが対応していない文法だけ」とか「Chromeの最新から2つ前のバージョンが対応していない文法だけ」みたいな指定もできるんですって。なにそれ便利すぎ。

使い方

使い方サンプルをつくったよ！

同じES6のソースをNode.js用とブラウザ用の2つに変換しています。
変換元のソースは短いですが、

• import
• class
• let/const
• デフォルト引数
• アロー演算子
• Promise
• async/await

このあたりの文法を使っています。当たり前ですが、変換対象によって出力される結果が違うのが興味深いです。
async/await・ジェネレータ関連のランタイムがちょっとややこしいので、gulpfile.jsの中でそこだけ特別扱いしています。

webpackを使っているので余計なソースがくっついてしまいましたがご勘弁を。