[Babel] Babel: exorcist で Source map を出力、watchify で差分コンパイルする
前回の続き。
Source map – exorcist
前回までの対応で、ソースマップがトランスパイル後の表示になっているよう。
exorcist で解決するとのことなので、インストールする。
% npm install --save-dev exorcist
bundle up する。
% $(npm bin)/browserify ./src/basic.es6 -t [ babelify --sourceMap ] -d | $(npm bin)/exorcist ./lib/basic.js.map > ./lib/basic.js
npm run から計測すると、毎回 1.5sec くらいかかる。
% time npm run build
> sandbox-es6@0.2.0 build /Users/****/projects/sandbox-es6
> browserify ./src/basic.es6 -t [ babelify --sourceMap ] -d | exorcist ./lib/basic.js.map > ./lib/basic.js
npm run build 1.46s user 0.21s system 106% cpu 1.574 total
差分コンパイル – watchify
gulp-watchなどを利用してファイル変更のトリガーでBrowserifyを実行すると非常に時間がかかってしまいます。そこで、watchifyを利用することで差分管理がされ高速にコンパイルすることが可能になります。
インストール。
% npm install --save-dev watchify
npm run から下記を実行すると Watch も行われる。
watchify ./src/basic.es6 -t babelify -o 'exorcist ./lib/basic.js.map > ./lib/basic.js' -d -v
実行すると、確かに速く、差分時にはもっと速い。
% npm run build
> sandbox-es6@0.2.0 build /Users/****/projects/sandbox-es6
> watchify ./src/basic.es6 -t babelify -o 'exorcist ./lib/basic.js.map > ./lib/basic.js' -d -v
3462 bytes written to exorcist ./lib/basic.js.map > ./lib/basic.js (0.73 seconds)
3462 bytes written to exorcist ./lib/basic.js.map > ./lib/basic.js (0.05 seconds)
watchify は
- browserify のラッパーらしく
browserifyではなくwatchifyで動かす。 - watch もしてくれる。
まとめ
babel に関する package.json の記述の遷移は、以下のようになった。
require と Source map でここまで必要。
// Babel でトランスパイルできた
babel src/ -d lib/ -s
// Browserify で require できるように
browserify src/basic.es6 --debug --transform babelify --outfile lib/basic.js
// exorcist で Source map 出力する
browserify ./src/basic.es6 -t [ babelify --sourceMap ] -d | exorcist ./lib/basic.js.map > ./lib/basic.js
// watchify で実用的な差分コンパイルをする
watchify ./src/basic.es6 --debug --transform babelify --outfile 'exorcist ./lib/basic.js.map > ./lib/basic.js' --verbose
以上でブラウザ向けに ES6 を素振りする環境が整ったようなので、sandbox としてまとめておく。
2016年の下半期までには「ES6(2015)ではじめる JavaScript 入門」といった本が出ますよね、きっと！
ということで、素振りをしつつ待ちたい。