摘要：然而配合服務(wù)器的實(shí)現(xiàn)局部刷新，同時(shí)更新端的代碼并非易事。如下介紹一種可行的實(shí)施方案適用于可有可無。如果在開發(fā)模式下，有更完善的服務(wù)器渲染熱加載的解決方案，歡迎大家積極貢獻(xiàn)

原文鏈接

前言

hot reload分析

react靜態(tài)資源熱加載分析

react服務(wù)器配置分析

待解決

總結(jié)

由react客戶端渲染的前端界面配合webpack-dev-server, react-hot-loader很容易實(shí)現(xiàn)前端開發(fā)過程中的局部刷新。然而配合node服務(wù)器的react-isomorphic實(shí)現(xiàn)局部刷新，同時(shí)更新client, server端的代碼并非易事。
如下介紹一種可行的實(shí)施方案：

適用于 koa2, react-hot-loader3, react-router可有可無。
Demo代碼地址：https://github.com/lanjingling0510/blog/tree/master/react-isomorphic-hot-example

react靜態(tài)資源的熱加載配置并不復(fù)雜。webpack-dev-server負(fù)責(zé)重新編譯代碼，react-hot-loader負(fù)責(zé)熱加載。

Note:webpack-dev-server也可以用開一個(gè)express服務(wù)器配合webpack-dev-middleware和webpack-hot-middleware中間件實(shí)現(xiàn)

配置webpack.client-dev.js:

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

// ...

entry: [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://127.0.0.1:8080",
    "webpack/hot/only-dev-server",
    "./src/client/home", // 入口路徑
]
    

修改babel配置文件

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

修改入口文件

import React from "react";
import ReactDOM from "react-dom";

// 共享的組件頁面
import Home from "../shared/page/Home";
// 熱加載組件
import ReactHotLoader from "../shared/component/ReactHotLoader";
const container = document.getElementById("react-container");

function renderApp(TheApp) {
    ReactDOM.render(
      
          
      ,
      container
    );
}

renderApp(Home);

// 下面的代碼用來支持我們熱加載應(yīng)用
if (__DEV__ && module.hot) {
    // 接受這個(gè)文件的修改用來熱加載
    module.hot.accept("./home.js");
    // 應(yīng)用任何的改變將造成熱加載，重新渲染。
    module.hot.accept(
      "../shared/page/Home",
      () => renderApp(require("../shared/page/Home").default)
    );
}

開發(fā)模式下，server端的配置比較復(fù)雜，需要考慮的事情如下：

監(jiān)聽server代碼的變動。

需要重新編譯server代碼

重新開啟server服務(wù)器，并保證require最新的server代碼

保證server端口按需開關(guān)，不沖突

監(jiān)聽server代碼

 // 監(jiān)聽server文件的變化，如果被修改則調(diào)用compileHotServer
 const watcher = chokidar.watch([
     path.resolve(__dirname, "../src"),
     path.resolve(__dirname),
 ], {ignored: path.resolve(__dirname, "../src/client")});

 watcher.on("ready", () => {
     watcher
     .on("add", compileHotServer)
     .on("addDir", compileHotServer)
     .on("change", compileHotServer)
     .on("unlink", compileHotServer)
     .on("unlinkDir", compileHotServer);
 });

關(guān)閉所有與客戶端的連接，關(guān)閉server服務(wù)器，重新編譯server代碼

 // 關(guān)閉所有連接，關(guān)閉服務(wù)器，重新編譯
 function compileHotServer() {
     compiling ++;
     // listenerManager實(shí)例包含當(dāng)前web服務(wù)器對象和客戶端連接的socket集合
     if (listenerManager) {
         listenerManager.dispose(true).then(runCompiler);
     } else {
         runCompiler();
     }
 }
 
 // webpack重新編譯
 function runCompiler() {
    compiler.run(() => undefined);
 }

重新開啟server服務(wù)器

// server代碼編譯完成
 // 開啟server服務(wù)器
 compiler.plugin("done", stats => {
     compiling --;
     if (compiling !== 0) return;

     if (stats.hasErrors()) {
         console.log(stats.toString());
         return;
     }

     console.log("? ?  Build server bundle done.");
     // 確保新的server bundles 代碼不在module cache當(dāng)中
     Object.keys(require.cache).forEach((modulePath) => {
         if (modulePath.indexOf(compiler.options.output.path) !== -1) {
             delete require.cache[modulePath];
         }
     });

     try {
         const listener = require(compiledOutputPath).default;
         listenerManager = new ListenerManager(listener, "server");
     } catch (err) {
         console.log(err);
     }
 });
 

. react-router包含的頁面組件更新后，提示[react-router] You cannot change ; it will be ignored，但不影響刷新

通過以上配置，可以實(shí)現(xiàn)修改代碼后，實(shí)現(xiàn)server和client代碼的更新以及hot reload。
代碼開發(fā)過程中，需要開啟兩個(gè)端口，分別用來提供client端靜態(tài)資源的編譯和后臺的server。

如果在開發(fā)模式下，有更完善的react isomoriphic服務(wù)器渲染熱加載的解決方案，歡迎大家積極貢獻(xiàn) ?