Browserify + ReactifyにWatchifyを導入してJSXの自動ビルド環境を作った

引き続き、Browserifyを勉強中。

<a href="http://umi-uyura.hatenablog.com/entry/2015/05/18/192815">React(JSX)開発にBrowserifyとReactifyを導入 - Umi Uyuraのブログ</a>umi-uyura.hatenablog.com

react-tools(jsx)でやっていた、.jsxの変更を監視してビルドできるようにするため、 Watchify を導入してみることにしました。

インストール

npmから、devDependenciesとなるようにインストール。

$ npm install watchify --save-dev

実行

Reactifyによる変換をおこなうBrowserifyの実行は以下のように実行していました。

$ $(npm bin)/browserify -t reactify src/app.jsx -o build/bundle.js

browserify コマンドを watchify へ置き換えることで、.jsxが変更されると自動的にビルドが走ります。

$ $(npm bin)/watchify -t reactify src/app.jsx -o build/bundle.js -v

こちらの記事（ Watchifyでbrowserifyを差分ビルド - Qiita ）にもあるように、そのまま実行すると何も出力されずに動いているのかわからないので、 -v を付けるようにしました。

また上の記事によると、どうやらWatchifyは単純に全てをビルドしなおしているのではなく、変更部分の差分をビルドしているようなので、パフォーマンス的にも良さそう。

npm run用設定

package.jsonにWatchifyの実行設定を追加。

{
  ...
  "scripts": {
    "start": "nw",
    "browserify": "browserify build/app.js -o build/bundle.js",
    "reactify": "browserify -t reactify src/app.jsx -o build/bundle.js",
    "watchify": "watchify -t reactify src/app.jsx -o build/bundle.js -v",
    "package": "nwbuild -p osx64,win64 .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

この場合、