热更新后端php,koa2后端热更新

前言

前端开发使用过webpack的朋友肯定知道它的热刷新功能，超喜欢它的热刷新有木有。还记得当初用的还是grunt、gulp。有个保存下就帮忙硬刷页面就觉得开心死了啊。后面用了webpack简直发现自己太单纯，年少无知。

image.png

既然用了koa2当然也想用这个功能，可惜很不幸的说照搬了下webpack-dev-middleware和webpack-hot-middleware并没有什么卵用。

怎么说呢？举个栗子，咱们类推下。使用过vue脚手架的朋友肯定知道它自带的webpack配置里有用webpack-dev-middleware和webpack-hot-middleware做热更新。npm run dev启动之后修改src下的文件会热刷新，修改build下的那肯定没什么卵用。同样的道理，类比下就知道了koa也没戏。

其实如果使用了koa-webpack-middleware会发现虽然修改了代码没生效，不过如果同时使用了eslint的话那还是可以检测出来的，所以代码肯定是重新编译了的，只是服务运行的还是旧代码。

所以我们是可以监测到代码有改动的，只是这里的关键是更新旧代码。所以我们要做的是把旧代码清掉，然后换成新代码。

百度了下发现早有人珠玉在前，心好痛，不过没关系，至少自己有探索过呀。

文章地址

// 清理缓存方法

function cleanCache(modulePath) {

var module = require.cache[modulePath];

// remove reference in module.parent

if (module.parent) {

module.parent.children.splice(module.parent.children.indexOf(module), 1); //释放老模块的资源

}

require.cache[modulePath] = null; //缓存置空

}

那难道koa-webpack-middleware没用了么？那倒不是。网上现有例子都是采用fs.watch监测代码修改，既然koa-webpack-middleware也可以检测到，那自然可以利用起来。

这里采用的是它的打印日志方法，旁门左道的利用了，O(∩_∩)O哈哈哈~

app.use(hotMiddleware(compiler, {

log: function () {

cleanCache(require.resolve('./data')); //清除该路径模块的缓存

try {

data = require('./data');

} catch (ex) {

console.error('module update failed');

}

}

}));

至此，修改.data.js发现服务器无需重启即可更新。

后记

其实发现很多东西网上都有人搞定了，而且乐于分享的还只是一部分，不过那又怎么样呢？还是自己探索来得好。毕竟看别人的大多过个眼熟，所以学习到一定程度看源码还是很有必要的。可惜目前只看了Backbone、artdialog、AndroidPN以及部分其他的例如jquery等热门库和一些不知名的库。

学海无涯，仍需努力！！！