用过 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.
正如官方文档开头写的那样,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,大家直接安装就能使用了。具体的添加过程如下:
安装中间件:
npm install think-webpack-hot-middleware think-webpack-dev-middleware --save-dev
修改
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 } ))
修改
src/common/config/hook.js
将定义好的中间件添加到resource
的钩子中:export default { resource: ['webpack-dev', 'webpack-hot'] }
修改
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
就可以看到效果。