I'm trying to build a HMR for koa2 development with chokidar.
Changing text in ./middlewares/render triggers chokidar file-watch event, and require.cache cleared immediately as expected, but when I reload page, the text rendered actually not changed.
const path = require('path');
const http = require('http');
const Koa = require('koa');
const chokidar = require('chokidar');
const views = require('./middlewares/views.js');
const render = require('./middlewares/render.js');
const PORT = 3000;
const app = new Koa();
app.use(views);
app.use(render);
const server = http.createServer(app.callback());
server.listen(PORT, function() {
console.log('server now listening on port: %s', PORT);
});
const watcher = chokidar.watch([
path.resolve(__dirname, './middlewares'),
]);
watcher.on('ready', function() {
watcher.on('all', function(event, filename) {
console.log('clearing module cache...');
Object.keys(require.cache).forEach(function (id) {
if (/[\/\\]middlewares[\/\\]/.test(id)) {
console.log('delete cache: %s', id);
delete require.cache[id];
}
});
});
});
const views = require('koa-views');
module.exports = views('./templates', {
http: 'ejs',
extension: 'ejs',
});
module.exports = async (ctx, next) => {
// CHANGING THIS TEXT, TRIGGERS CHOKIDAR FILE-WATCH EVENT.
// REQUIRE.CACHE SEEMS CLEARED IMMEDIATELY.
// BUT WHEN I RELOAD PAGE, TEXT DOES NOT CHANGES!
const content = 'test delete require.cache.';
await ctx.render('main.ejs', { content: content });
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Node Repo</title>
</head>
<body>
<div><%- content %></div>
</body>
</html>
Okay... This repository helped.
const views = require('./middlewares/views.js');
const render = require('./middlewares/render.js');
app.use(views);
app.use(render);
app.use(async (ctx, next) => {
const views = require('./middlewares/views.js');
await views(ctx, next);
});
app.use(async (ctx, next) => {
const render = require('./middlewares/render.js');
await render(ctx, next);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With