アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

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)

ユニット テストも含めた実際のプロジェクト構成については、以下のサンプルを参照のこと。

余談だが Babel 6 は変更が大きいためかバグや従来バージョンとの挙動の違いが結構あるようで新しい発見も多い。新しもの好きにはたまらないはず。

Comments from WordPress

  • mysticatea 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 絡みらしいトラブルに遭遇したら、これでチェックしてみます。