表参道.rb #12【一周年】 で話したネタ。
全然アップデートできていない clairvoyance をちゃんと更新しようと、やる気を高める為に ES2015 で書けるように直した。
資料
やったこと
gulp + babel の環境構築
これは Web 上に資料がいくらでも転がっているので、楽。
- 元のディレクトリ構成
clairvoyance ├ lib/ └ test/
- gulp + babel の構築後
clairvoyance ├ lib/ # gulp build で src/lib から生成 ├ test/ # gulp build で src/test から生成 └ src/ # ES2015 のソースコード ├ lib/ └ test/
こんな感じになるように環境作った。
ESLint (airbnb) の導入
ES2015 初心者なので、 ESLint を導入して、 airbnb の style に準拠して書くように設定した。
これも苦労せず、 web 上に資料がいくらでも転がっているので、普通に環境作れた。
あとは、 ESLint に指摘された箇所を 頑張って直す だけです。
カバレッジ計測
今まで使っていた istanbul だとカバレッジが計測できなくなったので、 remap-istanbul を使って直した。
これが一番苦労した。
# gulpfile.babel.js gulp.task('build', ['clean'], () => gulp.src('src/lib/**/*.js') .pipe(sourcemaps.init()) .pipe(babel()) .pipe(sourcemaps.write('../maps', { includeContent: false, sourceRoot: '../src/lib' })) .pipe(gulp.dest('lib')) ); gulp.task('remap-istanbul', ['test'], () => gulp.src('coverage/coverage-final.json') .pipe(remapIstanbul({ basePath: 'maps/', reports: { json: 'coverage/coverage.json', html: 'coverage/lcov-report', lcovonly: 'coverage/lcov.info', }, })) );
こんな感じで設定したら動いた。 Current Directory がよく分からんけど、色んなパターンで設定を試したところ、これで動いた。
備考
ブログ書いていたときに見つけたけど、 babel 向けのカバレッジツールもあるみたい。
codecov とか使えるか検証してないけど、もしかしたら remap-istanbul を使うより楽かも。
最後に
あまり参考になりそうにないブログだけど、 babel + remap-istanbul を使う人の参考に何かなれば幸いです。
詳しく設定内容などを知りたい人は GitHub のリポジトリを見てください。