読者です 読者をやめる 読者になる 読者になる

Umi Uyuraのブログ

Titaniumを使ったスマートフォンアプリ開発を中心に、プログラミング関連の作業ログ。

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

引き続き、Browserifyを勉強中。

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"
  },
  ...
}

この場合、

$ npm run watchify

で監視を開始します。

参考

実践Node.js プログラミング (Programmer's SELECTION)

実践Node.js プログラミング (Programmer's SELECTION)