專案地址

前言

前端開發使用過webpack的朋友肯定知道它的熱重新整理功能，超喜歡它的熱重新整理有木有。還記得當初用的還是grunt、gulp。有個儲存下就幫忙硬刷頁面就覺得開心死了啊。後面用了webpack簡直髮現自己太單純，年少無知。

既然用了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等熱門庫和一些不知名的庫。
學海無涯，仍需努力！！！