espower-babel 4.0 対応
私は JavaScript のユニット テストで mocha + espower-babel + power-assert を採用している。詳しくは ES6 コードをテストするを参照のこと。
これらのうち espower-babel を 4.0 に更新したところ ES6 コードの解析で SyntaxError が起きるようになった。Release Notes には Breaking Change が入ったことが明記されている。
espower-babel が Babel 6 を採用したことにより ES6 コードの解析は Babel 本体から Plugin/Presets に分離され、これらのインストールと明示的な設定が必要となった。espower-babel を Node モジュールとして実行する場合はコード上で babelrc オプションを指定すればよい。以下は README サンプルからの引用。
require('espower-babel')({
babelrc: {
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-commonjs"]
}
})しかし私は mocha と espower-babel を CLI から実行しているため、この方法は利用できない。
同じく Babel 6 を採用した babelify を Browserify とあわせて CLI から実行する場合、Presets を指定する方法は babelify v7.2 を試すに解説したように -t オプション内で babelify 用に --presets オプション経由で設定すればよい。
{
"scripts": {
"build:js": "browserify -t [ babelify --presets [ es2015 react ] ] ./src/js/App.js -d | exorcist ./src/html/bundle.js.map > ./src/html/bundle.js"
}
}今回もこの方法でゆけるかと思ったのだが mocha や espower-babel にはこのような CLI 用オプションは用意されていないようなので .babelrc という設定ファイルを追加する必要がある。
このファイルを mocha と espower-babel の参照を定義した package.json の置かれた階層に作成。今回は ES6 を採用したコードの解析を実施したいので設定は以下のようにする。
{
"presets": [ "es2015" ]
}次に Plugin/Presets の npm をインストール。babel-preset-es2015 が必要となる。ユニット テスト系と一緒に最新版を入れておく。
$ npm i -D mocha espower-babel power-assert
$ npm i -D babel-preset-es2015テスト用コマンドは package.json へ以下のように定義しているので、
$ npm i -D mocha espower-babel power-assert
$ npm i -D babel-preset-es2015以下のように実行する。今回の対応により SyntaxError の起きていたテストが正しく実行されることを確認できた。
$ npm test
> es6-unit-test@1.0.0 test .../examples-web-app/es6-unit-test
> mocha --compilers js:espower-babel/guess test/**/*.js
Sample.sum()
✓ 合計
✓ 不正な型による例外発行
Floor()
✓ 整数化
3 passing (8ms)ユニット テストも含めた実際のプロジェクト構成については、以下のサンプルを参照のこと。
- es6-unit-test
- front-end-starter akabekobeko/examples-electron
- audio-player
- electron-starter
余談だが Babel 6 は変更が大きいためかバグや従来バージョンとの挙動の違いが結構あるようで新しい発見も多い。新しもの好きにはたまらないはず。
Comments from WordPress
mysticatea 2015-11-26T01:40:12Z
babel-doctorコマンドが簡単なミス (例えば .babelrc が無い等) は教えてくれたりします。> npm i -g babel-cli > babel-doctor Babel Doctor Running sanity checks on your system. This may take a few minutes... × Found no .babelrc config √ No duplicate babel packages found √ All babel packages appear to be up to date √ You're on npm >=3.3.0 Found potential issues on your machine :(アカベコ 2015-11-26T11:25:34Z
情報提供ありがとうございます。babel-doctor の存在をはじめて知りました。
Babel 絡みらしいトラブルに遭遇したら、これでチェックしてみます。