こんにちは、三宅です。
ECMAScript6を書くジャバスクリプターの強い味方「Babel」の大きなバージョンアップが10/29に行われました。
ちなみに、このブログを書いている時点ではバージョンが6.1.19となっていて、かなりのスピードでアップデートが行われているようです。
Babel 6は次世代のJavaScript開発のプラットフォームとなることを目標に、かなり破壊的な変更が行われています。
中でも、以下の変更は大きな影響があると考えています。
- トランスフォームなどの機能をモジュールとして提供する形態へのアーキテクチャの変更
- プラグインAPIの変更
1についてはBabel単体は何もせず、トランスフォーム等を行うプラグインを追加する必要があるようになっています。
2はこれまでBabel 5.xで提供されていた機能の範囲を利用していた人には大きな影響はないかもしれませんが、他のでデベロッパが開発したプラグインを利用していた人は、Babel 6への対応が行われているかの確認が必要になるでしょう。
個人的には、Babelの方向性の変更は良いと思っているのですが、しばらくは5.xのようにトランスパイラとして使いたい…という事で、これまで利用していたgulpやBrowserifyなどの様々な形態で、問題なく利用できるかどうか試してみました。
babel-experiment
ES6のコードには、Modules、Arrow Function、Class、Template Stringsを含んでいます。
そのコードに対して、CLI、Browserify + babelifyによるES5への変換、Mochaによるテストの実行、またgulpfile.js自体のES6の記述と、gulpを通したbabelとmochaの実行を行いました。
それぞれ、簡単に説明していきます。
babel-cli
Babel 6ではCLIから利用する際は、babel-cliを用いるようになりました。
ローカルにbabel-cliをインストールし、/node_modules/.bin/babelを利用しています。
babel cli/src -d cli/dist
Browserify
フロントエンドのコードを書くときにはほぼ必須のBrowserify。
トランスフォームにbabelifyを指定して実行しています。
browserify -t babelify browserify/src/index.js -o browserify/dist/index.js
Mocha
テストランナー。
コンパイラとして、babel-coreを指定しています。
mocha --compilers js:babel-core/register --reporter nyan mocha/test
gulpfile.jsとgulpタスクの実行
gulpfile.babel.jsという拡張子にすることで、ファイルの読み込み前にbabel-core/registerが呼ばれトランスフォームされてから実行されます。
gulpタスクの実行は、今まで通り gulp ${taskname} で大丈夫です。
今までプロジェクトで利用したことのある、問題なく変換・テスト等を実行することができました。
.babelrcの記述
5.xではCLIやgulp-babelでの実行時にオプションを渡して実行していましたが、6からは.babelrcで設定を記述することが推奨されているようです。
.babelrcはpackage.jsonと同じ階層、プロジェクトルートに配置します。CLIやgulp-babelでの実行、mochaやbrowserifyのオプションとして指定した場合でもすべて、その設定を読み込んで実行されます。
{
"presets": ["es2015", "stage-2", "react"]
}
今回の.babelrcはこのような記述となっています。
Babel/FAQを参考に、Babel 5.xと同じ出力結果を得ることのできるよう「es2015」、「stage-2」、「react」のプリセットを指定しています。
プラグインを利用する場合は、.babelrcに以下のようにpluginsを追加します。
"plugins": ["transform-react-jsx"]
Babel 6になって大きな変更が行われましたが、自分の利用している範囲では問題なく動きそうで一安心です。
毎日アップデートが行われていてまだドキュメントが完全に整備されていないなど、まだ安定しているとは言いがたい状態ですが、今後どのように進化していくのか楽しみでもあります。
今回の記事が、Babel 6への移行の方法や、Babel 5.xを使い続けるかの判断の助けになればと思います。