React + Browserify + Babelify環境の自動リロードにBeefyを使ってみた

最近Reactを少し触っていましたが、業務の関係もあって、純粋なWebサイトではなく、主にNW.jsのUI構築用に使っていましたが、せっかくなので、シングルページなWeb制作でも使っていけるようにしようと思って、試しています。

NW.jsのときに作ったBrowserify + Babelify + Watchifyの構造をベースにして取り組んでいたのですが。

umi-uyura.hatenablog.com

（Reactに限らないことですが）WebのUIを作っているときには、何度もブラウザをリロードすることになるので、自動リロードの機能を入れることにしました。

NW.jsのときは、NW.jsのサイトに紹介されていた方法を採用していました。

umi-uyura.hatenablog.com

今回はWeb開発向きの仕組みでやろうと思って探してみたところ、以下の記事で紹介されているBeefyというものが良さそうだったので、試してみることにしました。

JavaScript - ちょっとしたフロントエンド開発のセットアップ - Qiita

Beefyの基本的な使い方

Beefyはnpmから導入できます。

package.jsonに依存関係を残すために、以下のようにプロジェクトにインストールします。

$ npm install beefy --save-dev

基本的にHTMLなどへ手を加える必要はなく、Babelifyを噛ませつつ自動リロードを有効にするには、以下のようにBeefyを呼び出します。

$ $(npm bin)/beefy src/app.jsx:build/app.js src --live -- -t babelify

Browserifyでは -o で指定していた出力先の指定は、 src/app.jsx:build/app.js のように、変換元のファイル名と : を挟んだ形で指定できるようです。

--live を付けることで、自動リロードが有効になります。内部的にはWatchifyを使うようで、プロジェクト内にWatchifyがあればそれを、なければグローバルにインストールされているものを使おうとするようです。（Browserifyも同様）

-- から後ろはBrowserifyへ渡す引数として解釈されるとのことなので、今回はBabelifyを指定。

また他にも --open を付けることで、実行時にブラウザを開いてくれます。

JSXを変更しても自動リロードが効かない？

使ってみたところ、一見うまくいっているように見えていたのですが、よくよく見ていると、HTMLやCSSなどの変更時はリロードされているのですが、肝心の.jsxを修正したときに、リロードは走るものの、修正内容が反映されないという状況になっていました。

注意して動きを追っていると、どうやら.jsxを修正してからトランスパイルが完了するより先に、ブラウザのリロードが走ってしまっているようでした。

そこでBeefyのGitHubのIssueなどを眺めていたところ、どうやらそれを対策したと思われるPull Requestを発見しました。

Fix Live Reload Reliability by sberan · Pull Request #77 · chrisdickinson/beefy

まだテストが充分でないらしく、マージする準備ができていないとのことですが、試してみることにしました。

いったん、 npm uninstall beefy --save-dev で既存のBeefyは削除して、Pull Request元のリポジトリから、ブランチを指定してインストール。

$ npm install sberan/beefy#fix-live-reload-reliability --save-dev

これを使ってみたところ、自動リロードでJSXの変更が反映されるようになりました。

その代わり、自動リロードが走るまでの時間が若干長くなってしまったのですが、Browserifyの処理が終わるのを待っているのだと思うので、仕方がないところでしょう。

早くこのPull Requestが本体に取り込まれると良いのですが、それまではこちらの修正版で進めてみようと思います。

React: Up & Running: Building Web Applications