ThinkJS 开发之前端热更新

用过 ThinkJS 的人都知道，开发模式下 ThinkJS 是支持实时更新的，也就是说不需要我们重启服务就能让修改生效，不得不说这种开发方式真的非常方便。然而对于前端代码我们还是得老老实实的刷新页面才能看到效果，我们能不能让前端代码也支持热更新呢？答案是肯定的。首先我们看一张动图了解我们最终想要功能是什么样的（点击图片查看大图）。

关于前端页面自动刷新，其实有非常多的方案了，从简单的 F5, Live Reload 到 Browser Sync 都是非常不错的方案，当然按照套路本文的主角肯定不是它们了。用过 webpack 的同学应该都用过或者知道 webpack-dev-server 吧，想必大家都对它的不刷新页面热更新代码的方式眼前一亮，没错，今天我们的主角是它！

The webpack-dev-server is a little Node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is connected to the server via Sock.js.

via: http://webpack.github.io/docs/webpack-dev-server.html

正如官方文档开头写的那样，webpack-dev-server 本质上内部是用了 express ，使用 webpack-dev-middleware 在服务端编译，并使用 websocket 通知页面进行更新。那么问题来了，我们是一个 ThinkJS 的项目，为啥为了使用热更新还非得去再启一个别家的服务，这什么鬼！好在不是我一个人这么想的，所以有人开发了 webpack-hot-middleware 这个项目，将 webpack-dev-server 热更新功能脱离出来，让我们能自由自在的在自己的服务上搭建。所以我们只要 webpack-dev-middleware 和 webpack-hot-middleware 配合就能实现 webpack-dev-server 的热更新功能了。

不过 webpack-dev-middleware 和 webpack-hot-middleware 都是 express 的中间件，在 ThinkJS 上无法直接使用。所以我将它们简单的包装成了 ThinkJS 的插件：think-webpack-dev-middleware 和 think-webpack-hot-middleware，大家直接安装就能使用了。具体的添加过程如下：

1. 安装中间件：

   npm install think-webpack-hot-middleware think-webpack-dev-middleware --save-dev
   

2. 修改 src/common/bootstrap/middleware.js 定义中间件：

    import webpackDevMiddleware from 'think-webpack-dev-middleware';
    import webpackHotMiddleware from 'think-webpack-hot-middleware';
    import webpack from 'webpack';
    import config from '../../../webpack.config.js';
   
    const compiler = webpack(config);
   
    think.middleware('webpack-dev', webpackDevMiddleware(
      compiler,
      {
        stats: { colors: true }
      }
    ));
   
    think.middleware('webpack-hot', webpackHotMiddleware(
      compiler,
      {
        log: think.log
      }
    ))
   

3. 修改 src/common/config/hook.js 将定义好的中间件添加到 resource 的钩子中：

   export default {
     resource: ['webpack-dev', 'webpack-hot']
   }
   

4. 修改 webpack.config.js 添加监听客户端 webpack-hot-middleware/client 以及热更新插件：

   var webpack = require('webpack');
   
   module.exports = {
     entry: {
       main: [
         'src/index.js',
         'webpack-hot-middleware/client?reload=true'
       ]
     },
     plugin: [
       new webpack.HotModuleReplacementPlugin()
     ]
   };
   

这样就可以实现 ThinkJS 内部前后端热更新了，如果有不是很懂的同学可以参考 think-webpack-hot-middleware/example 这个示例项目，直接 npm start 就可以看到效果。