ThinkJS 开发之前端热更新

提醒:本文最后更新于 2878 天前,文中所描述的信息可能已发生改变,请谨慎使用。

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

关于前端页面自动刷新,其实有非常多的方案了,从简单的 F5, Live ReloadBrowser 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-middlewarewebpack-hot-middleware 配合就能实现 webpack-dev-server 的热更新功能了。

不过 webpack-dev-middlewarewebpack-hot-middleware 都是 express 的中间件,在 ThinkJS 上无法直接使用。所以我将它们简单的包装成了 ThinkJS 的插件:think-webpack-dev-middlewarethink-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 就可以看到效果。

Avatar
怡红公子 擅长前端和 Node.js 服务端方向。热爱开源时常在 Github 上活跃,也是博客爱好者,喜欢将所学内容总结成文章分享给他人。

0 评论