React + Browserify + Babelify環境の自動リロードにBeefyを使ってみた
最近Reactを少し触っていましたが、業務の関係もあって、純粋なWebサイトではなく、主にNW.jsのUI構築用に使っていましたが、せっかくなので、シングルページなWeb制作でも使っていけるようにしようと思って、試しています。
NW.jsのときに作ったBrowserify + Babelify + Watchifyの構造をベースにして取り組んでいたのですが。
(Reactに限らないことですが)WebのUIを作っているときには、何度もブラウザをリロードすることになるので、自動リロードの機能を入れることにしました。
NW.jsのときは、NW.jsのサイトに紹介されていた方法を採用していました。
今回は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
- 作者: Stoyan Stefanov
- 出版社/メーカー: Oreilly & Associates Inc
- 発売日: 2015/09/25
- メディア: ペーパーバック
- この商品を含むブログを見る