使用 React Hot Loader 加速開發

React Hot Loader 是一套搭配 React 幫助加速開發的工具，讓你修改 React Component 的 JavaScript 檔案在存檔的同時，觸發 Webpack 重新 build bundle，並且重新把新的 Component 送到瀏覽器上看到結果！

注意：你不需要自己刷新瀏覽器畫面，這代表畫面上 Component 的狀態也會一起被保留下來！

$ npm install react-hot-loader

Webpack 設定

1. development 版本需在 entry 加上設定

entry: [
  'react-hot-loader/patch',
  ...otherEntrySettings
];

注意：這個設定必須放在陣列的第一個，否則會在 run time 的時候在 console 報錯給你！

2. 加上 HotModuleReplacementPlugin 啟動 HotModuleReplacement 功能！

plugins: [
  new webpack.HotModuleReplacementPlugin(),
  ...otherPluginsSettings
];

Webpack-devServer 設定

使用 hot 選項，使 Webpack 的 HotModuleReplacement 功能可以完整發揮！

run dev command

$ babel-node devServer.js

devServer.js

import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import config from './webpack.config.babel';
new WebpackDevServer(webpack(config), {
  hot: true,
  ...otherDevServerSettings
});

Babel 設定

在 .babelrc 中加上 plugins 設定

plugins": [
  "react-hot-loader/babel"
]

Source code 設定

在 entry point 的 JavaScript 檔案中，增加 AppContainer 與 module.hot 設定

import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
const rootElement = document.getElementById('app');
const renderApp = () => {
  const App = require('./app');
  render(
    <AppContainer>
      <App />
    </AppContainer>,
    rootElement
  );
};
renderApp(rootElement);
if(module.hot) {
  module.hot.accept(
    './app.js',
    () => renderApp(rootElement)
  );
}

如果你正在使用 Redux …

在 Redux 的世界中，reducer 負責業務邏輯，所以也會經常被修改，所以我們也會希望當我修改了 reducer，React Hot Loader可以自動幫忙抽換 reducer！

在 store.js 中

import reducer from '../reducer/reducer';
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
const middleware = applyMiddleware(thunk);
const store = createStore(reducer, composeWithDevTools(middleware));
module.hot && module.hot.accept('../reducer/reducer', () => {
  const nextRootReducer = require('../reducer/reducer');
  store.replaceReducer(nextRootReducer);
});
module.exports = store;

利用 module.hot 來 trigger 改變事件，並且利用 store 提供的 replaceReducer API 來抽換 reducer！

結語

這樣就完成了 React Hot Loader 的設定！希望可以幫助正在開發 React 的你！

當然如果你不是使用 Webpack，官方文件也有提供其他解法可以使用，詳情請見： React Hot Loader — official doc。