[Babel] Babel: exorcist で Source map を出力、watchify で差分コンパイルする

前回の続き。

[markdown]
> * [Babel: import / export をブラウザ向けに Babelify で実現する | deadwood](https://www.d-wood.com/blog/2016/04/14_7926.html)

## Source map – exorcist

前回までの対応で、ソースマップがトランスパイル後の表示になっているよう。

exorcist で解決するとのことなので、インストールする。

> * [Source-maps issue · Issue #86 · babel/babelify](https://github.com/babel/babelify/issues/86)
> * [thlorenz/exorcist: Externalizes the source map found inside a stream to an external .js.map file](https://github.com/thlorenz/exorcist)

“`prettyprinted
% npm install –save-dev exorcist
“`

bundle up する。

“`prettyprinted
% $(npm bin)/browserify ./src/basic.es6 -t [ babelify –sourceMap ] -d | $(npm bin)/exorcist ./lib/basic.js.map > ./lib/basic.js
“`

`npm run` から計測すると、毎回 1.5sec くらいかかる。

“`prettyprinted
% 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

> * [watchifyでファイルの監視を行う – to-R](http://blog.webcreativepark.net/2015/11/10-100754.html)
>
> gulp-watchなどを利用してファイル変更のトリガーでBrowserifyを実行すると非常に時間がかかってしまいます。そこで、watchifyを利用することで差分管理がされ高速にコンパイルすることが可能になります。

インストール。

> * [substack/watchify: watch mode for browserify builds](https://github.com/substack/watchify)

“`prettyprinted
% npm install –save-dev watchify
“`

`npm run` から下記を実行すると Watch も行われる。

“`prettyprinted
watchify ./src/basic.es6 -t babelify -o ‘exorcist ./lib/basic.js.map > ./lib/basic.js’ -d -v
“`

実行すると、確かに速く、差分時にはもっと速い。

“`prettyprinted
% 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 でここまで必要。

“`prettyprinted
// 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 としてまとめておく。

> * [DriftwoodJP/sandbox-es6](https://github.com/DriftwoodJP/sandbox-es6)

2016年の下半期までには「ES6(2015)ではじめる JavaScript 入門」といった本が出ますよね、きっと！
ということで、素振りをしつつ待ちたい。
[/markdown]