まさたか日記スマートフォン用の表示で見るまさたか日記2017-08-18ReactのHMR環境を作るTypeScript/Node昨今のトランスパイルやバンドル作業が行われるWEBフロント開発では書いたコードがそのままブラウザで動かないために、WEBブラウザで実行確認するためにはビルド・ブラウザリロードの手間が必要です。Replacement)環境を構築すると、コードが書き変えを監視していて必要時に自動的にビルドとブラウザリロードがなされて最新の状態を見ることができるようになります。webpackではHMR用途にwebpack-dev-serverが用意されていて、その構成や設定は結構シンプルになっています。webpack-dev-servernpmで取ってきたら最新安定バージョンは2.7.1でした。全部プロクシする設定。],};プロジェクトの構成がwebpack-dev-serverを意識した作りにしていればnpmインストールだけで何も設定せずとも動くのですが、私の場合は既存のプロジェクトが以下の調整を必要としました。と一階層下に配置していた。outputエントリの中に「publicPath」設定で/js/をURLに挿入する。APIサーバがあり、ポート8080番で動いているのでwebpack-dev-serverとそのままではポート競合する。devServerエントリの中に、「port」設定でとりあえず9000番に設定した。webpack-dev-serverで受けたAPIリクエストをAPIサーバにそのまま渡すためにプロクシの設定を行う。「proxy」設定で転送先の情報を記述する。この設定でバンドルファイル以外は全部プロクシされるHotModuleReplacementPluginはドキュメントによってはあったりなかったりするんだけど、いれないとHMRにならない。HotModuleReplacementPlugin登録は必要。ReactのHMR上記までで、ES6を用いたWEBフロントのHMR環境は整います。--openでターミナルから起動すればビルドが走り、自動でWEBブラウザも開きます。npmスクリプト設定にも書いておきました。--openスイッチはブラウザを開くかどうかだけなので付けなくても支障ない。},}しかし、これだけでは普通のアプリならいいらしいけど、私のReact使ったアプリでは問題あります。ソースを書き換えるとブラウザをリロードしてしまうために画面が一旦フラッシュされてしまう。そのためアプリの状態などを失ってしまいます。Reactのアプリケーションはさらに設定を重ねて該当Reactコンポーネントだけ再描画するHMRの特別な環境を上乗せしないといけません。react-hot-loader@next必要なものをnpmでインストールします。アプリケーションを書き換える必要があり、その際にeslintが怒るのでreact-hot-loaderはdependenciesのほうに入れます(-saveスイッチ)。開発バージョンのものを@nextでインストール。HMRのために設定を変えないといけないのでこまりました。この設定はeslintやJestとも共有していて、package.jsonに書いてましたが、他に影響しないようにwebpack.config.babel.jsのほうに設定するようにしてもダメだった。初回のビルド自体は問題なくともソース変更時にうまく表示更新がされなくなってしまいます(たぶん今後の修正で治ってくる雰囲気の問題のように思います)。es2015プリセットでmoduleをfalseにしているのはwebpack2(私の実際は3.5.5)だからです。これと、react-hot-loader/babelプラグインを足すのが必要要件。このように大元のBabel設定を書き換えてしまったために、webpackのconfigは非Babelに直しました。非Babel書き換え。],};現バージョンだとwebpackのconfig自体にBabelを利用するとHMRが効かなくなるため非Babelでやる。webpack.config.babel.jsでバンドル対象に、react-hot-loader/patchなどを追加します。});}アプリケーションのメインルーチンのところでコードを書き換える必要があります。react-hot-loaderのAppContainerコンポーネントで元のアプリを囲うのと、module.hot関連のこちらもおまじない的コード。これでReactのアプリがコード書き換えに即時反映するようになりました。非react-router3アプリとしてHMR確認用。</div>);こちらのh1タグTEXTを書き換えて保存すると、ビルドが自動で走り、ブラウザが全部再読み込みされず変更箇所だけ変わる真のHMRが確認できます。カウンターの値が0に戻らずにインクリメントし続けてちょっと感動。