表参道.rb #12【一周年】 で話したネタ。
全然アップデートできていない clairvoyance をちゃんと更新しようと、やる気を高める為に ES2015 で書けるように直した。
資料
やったこと
gulp + babel の環境構築
これは Web 上に資料がいくらでも転がっているので、楽。
clairvoyance
├ lib/
└ test/
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 向けのカバレッジツールもあるみたい。
github.com
codecov とか使えるか検証してないけど、もしかしたら remap-istanbul を使うより楽かも。
最後に
あまり参考になりそうにないブログだけど、 babel + remap-istanbul を使う人の参考に何かなれば幸いです。
詳しく設定内容などを知りたい人は GitHub のリポジトリを見てください。
github.com