从零开始构建react应用（七）代码修改自动应用

前言

开发的时候，为了更好的体验，我们往往会希望修改完代码，按ctrl+s保存代码后，浏览器就呈现出我们最新的修改结果。利用目前的一些工具，我们可以实现这样的效果，本文主要讲解客户端代码修改后热重载、服务端代码修改后重启node进程和node进程重启后自动刷新浏览器这三部分的具体实现过程。

客户端热重载

我们利用webpack来实现客户端热重载的功能。

安装依赖

以下依赖后续会使用到：

nom install react-hot-loader webpack-hot-middleware @types/react-hot-loader @types/webpack-hot-middleware @types/webpack-env

PS: @types/webpack-env主要用于给webpack里诸如module，require这些变量进行类型补充定义，而不是默认使用node端的定义

创建基于koa的hot中间件

和dev中间件一样，webpack-hot-middleware中间件也需要经过改造以用于koa：

// ./src/webpack/koa-webpack-hot-middleware.ts

import * as Koa from 'koa';

import * as webpack from 'webpack';

import * as webpackHotMiddleware from 'webpack-hot-middleware';

import * as stream from 'stream';

export default (compiler: webpack.Compiler, opts?: webpackHotMiddleware.Options) => {
  const hotMiddleware = webpackHotMiddleware(compiler, opts);

  return (ctx: Koa.Context, next: () => Promise<any>): any => {
    const streamer = new stream.PassThrough();
    ctx.body = streamer;
    const res: any = {};
    res.write = streamer.write.bind(streamer);
    res.writeHead = (state: number, headers?: any) => {
      ctx.state = state;
      ctx.set(headers);
    };
    return hotMiddleware(ctx.req, res, next);
  };
};

这里主要是修改了res的两个方法，使得原hot中间件调用res的这两个方式时，可以作用到ctx对象的相关属性上去。

现在来应用它：

./src/webpack/webpack-dev-server.ts

...
import koaWebpackHotMiddleware from './koa-webpack-hot-middleware';
...
export default (app: Koa, serverCompilerDone) => {
  ...
  app.use(koaWebpackDevMiddleware(clientCompiler, devMiddlewareOptions));
  app.use(koaWebpackHotMiddleware(clientCompiler));
  ...
};
...

需要在dev中间件后使用。

修改clientDevConfig

按照官方介绍，使用webpack-hot-middleware的话，我们需要在webpack配置上做一些改动：

./src/webpack/client.ts

...
((clientDevConfig.entry as any).client as string[]).unshift(
  'webpack-hot-middleware/client',
); // 热重载配置
((clientDevConfig.entry as any).vendor as string[]).unshift(
  'react-hot-loader/patch',
); // 热重载配置
...
const tsRule = getTsRule('./src/webpack/tsconfig.client.json');
(tsRule.use as object[]).unshift({
  loader: 'react-hot-loader/webpack',
});
...
(clientDevConfig.module as webpack.NewModule).rules.push(
  ...
  tsRule,
  ...
);
...
clientDevConfig.plugins.push(
  ...
  new webpack.HotModuleReplacementPlugin(), // 热重载配置
  ...
);
...

主要涉及入口文件，规则，插件这三部分内容。

给根节点包裹AppContainer

根据react-hot-loader官方介绍，我们需要给根节点包裹其提供的AppContainer组件，介于同构，所以前后端都需要加。

这个是服务端的：

./src/server/bundle.tsx

...
import { AppContainer } from 'react-hot-loader';
...

export default {
  ...
  render() {
    ...
    const html = renderToString(
      <AppContainer>
        <AppProvider context={context}>
          <AppContent />
        </AppProvider>
      </AppContainer>,
    );
    ...
  },
  ...
};
...

客户端的稍微复杂一些，因为涉及热重载所以renderApp函数需要做些改造，从无参改为接收组件作为参数：

./src/client/index.tsx

...
import { AppContainer } from 'react-hot-loader';
...
function renderApp(Comp) {
  ReactDOM.hydrate(
    <AppContainer warnings={false}>
      <Comp />
    </AppContainer>,
    document.getElementById('app'),
  );
}
...
window.onload = () => {
  renderApp(App);

  if (module.hot) {
    module.hot.accept('./component/app', () => renderApp(require('./component/app').default));
  }
};
...

这样，我们就实现了客户端的热重载效果，打开浏览器，我们修改AppContent组件里的hello world字符串，会发现浏览器无刷新的呈现了最新结果，修改样式文件也会实时应用变更内容。

服务端自动重启

利用nodemon，可以很方便的实现重启node进程。

安装依赖

npm install nodemon --save-dev

配置nodemon

我们在根目录下新建nodemon的配置文件nodemon.json:

./nodemon.json

{
  "watch": [
    "./dist/config",
    "./dist/server",
    "./dist/webpack"
  ]
}

我们监听dist目录下的三个文件夹，这三个文件夹内容涉及服务端代码。一旦我们修改了ts文件，ts编译成的js就会发生相应的修改，从而被nodemon监听到。

修改我们的启动命令：

{
    ...
    "scripts": {
      ...
      "dev": "nodemon ./dist/server/index.js",
      ...
    },
    ...
}

将node修改为nodemon即可。

这样就实现了修改服务端代码，自动重启了。

浏览器自动刷新

虽然按照上述方法，我们实现了服务端自动重启，但是我们已经打开浏览器并感知不到服务端重启这个事件，我们想要实现感知可以利用webpack-hot-middleware（下简称whm）来实现。

原理解析

从浏览器控制台的打印信息可以看到，当服务端重启，whm客户端会丢失链接，并定时重新尝试链接，直到成功。我们可以利用这一特性来实现浏览器自动刷新，我们在服务端启动时设置一个hmrKey值，并在服务端bundle完成后通过whm的publish方法向浏览器定时推送该值，浏览器则进行监听，将该值存于本地，一旦服务端重启，hmrKey改变，浏览器接收到新的hmrKey值则进行刷新页面操作。

输出whm实例

我们自己写的koa-webpack-hot-middleware输出的是一个function，现在我们要利用whm的实例，所以我们将其作为function的属性一并输出。

// ./src/webpack/koa-webpack-hot-middleware.ts

...
export default (...) => {
  ...
  const koaWebpackHotMiddleware = (...) => { ... };
  ...
  (koaWebpackHotMiddleware as any).hotMiddleware = hotMiddleware;
  ...
  return koaWebpackHotMiddleware;
  ...
};
...

将whm实例作为serverCompilerDone回调参数

./src/webpack/webpack-dev-server.ts

...
export default (...) => {
  ...
  let hotMiddleware;
  ...
  clientCompiler.plugin('done', () => {
    ...
    serverCompiler.plugin('done', () => serverCompilerDone.call(null, hotMiddleware));
    ...
  };
  ...
  const koaWebpackHotMiddlewareObject = koaWebpackHotMiddleware(clientCompiler, {
    heartbeat: 1000,
  });
  ...
  hotMiddleware = (koaWebpackHotMiddlewareObject as any).hotMiddleware;
  ...
  app.use(koaWebpackHotMiddlewareObject);
  ...
};
...

我们先定义whm实例变量名，配置完clientCompiler后，再利用其获得whm实例值，最后给whm实例变量赋值。

hmrKey发送

在入口处设定，并通过whm实例发送给浏览器：

// ./src/server/index.ts

...
const hmrKey = Math.random() * 100000 + '';
let hmrKeyT;
...
if (isDev) {
  ...
  webpackDevServer(app, (hotMiddleware) => {
    ...
    if (hotMiddleware && typeof hotMiddleware.publish === 'function') {
      global.clearInterval(hmrKeyT);
      hmrKeyT = global.setInterval(() => {
        hotMiddleware.publish({ action: 'bundled', hmrKey });
      }, 1000);
    }
    ...
  }); // 仅在开发环境使用
  ...
}
...

hmrKey接收

客户端入口进行监听逻辑：

// ./src/client/index.tsx

...
window.onload = () => {
  ...
  if (module.hot) {
    ...
    let hmrKey;
    ...
    /* tslint:disable no-submodule-imports */
    const hotClient = require('webpack-hot-middleware/client');
    ...
    hotClient.subscribe((e) => {
      if (e.action === 'bundled') {
        if (hmrKey && (hmrKey !== e.hmrKey)) {
          window.location.reload();
        } else {
          hmrKey = e.hmrKey;
        }
      }
    });
    ...
  }
};
...

修改重连等待时长

根据官方建议该值为心跳时长两倍，上面我们设置1秒一次心跳，这里我们设置为两秒：

// ./src/webpack/client.ts

...
((clientDevConfig.entry as any).client as string[]).unshift(
  'webpack-hot-middleware/client?timeout=2000',
); // 热重载配置
...

其它解决方案

业界常用的有browser-sync，我也尝试了一下，但是对于我们这个koa+webpack体系的app并不是太适合，它依赖express，还得额外加gulp来进行流程控制，进行一大堆繁杂的配置，另外它的功能实在太强大，所以这里我就自己想了上面这个解决方案。

Thanks

By devlee