Web kodunun değiştirici modülü değiştirmesi

Question

Şu ana kadar baktığım tüm web paketi örnekleri, istemci tarafı sıcak modülünün değiştirilmesiyle ilgili, örneğin: this ve this.

webpack belgeye göre, bir webpack-dev-sunucu veya ara katman (kullanabilirsiniz webpack-dev-webpack-dev-katman ve bir yapılandırma entry içinde webpack-hot-middleware/client birlikte webpack sıcak-katman, ve örneğin entegre js) istemcinin yan kodları için sıcak modül değiştirmeyi etkinleştirme

Sunucu tarafı kodları için sıcak modül değiştirmeyi etkinleştirmek mümkün mü? Belge yok bir example

var requestHandler = require("./handler.js"); 
var server = require("http").createServer(); 
server.on("request", requestHandler); 
server.listen(8080); 

// check if HMR is enabled 
if(module.hot) { 
    // accept update of dependency 
    module.hot.accept("./handler.js", function() { 
     // replace request handler of server 
     server.removeListener("request", requestHandler); 
     requestHandler = require("./handler.js"); 
     server.on("request", requestHandler); 
    }); 
} 

belge açıklama oldukça yedek olduğunu gösterir.

Soru şu ki, sunucu yeniden başlatılmadan sunucu tarafı kodunda modül değiştirme nasıl yapılır? (Şu anda, dosya değişikliklerinde sunucuyu yeniden başlatmak için sunucu tarafı kodunu izleyen nodemonum var)

Answer 1

Bu iyi bir başlangıç ​​noktası olabilir, https://github.com/jlongster/backend-with-webpack. WebPack ile birlikte

Answer 2

Sıcak yüklenmesi sunucu katman aslında iki nedenden dolayı sıcak yüklenmesi istemci tarafı demetleri çok daha kolaydır:

1. Sunucu/İstemci iletişimini işlemek gerekmiyor. Middleware neredeyse her zaman vatansız değildir, bu yüzden kendinizi devlet korumayla ilgilenmeniz gerekmez.

Bu istemci tarafı sıcak modül WebSockets gibi yeniden yanı sıra module.hot.accept/module.hot.dispose kendisini güncellemek için kodunuzu öğretim ile ilgili tüm hareketli parçaları görmezden anlamına gelir. endişelenecek hiçbir devlet yoktur gerçeğini görebileceğiniz gibi

// ./src/middleware.js 
module.exports = (req, res) => { 
    res.send('Hello World'); 
}; 

// webpack.config.js 
const path = require('path'); 

module.exports = { 
    target: 'node', 
    entry: './src/middleware.js', 
    output: { 
     path: path.join(__dirname, './dist'), 
     filename: 'middleware.js', 
     libraryTarget: 'commonjs2' 
    } 
}; 

// ./src/index.js 
const express = require('express'); 
const config = require('webpack.config.js'); 

const app = express(); 
const queue = []; 
let latestMiddleware; 

webpack(config).watch(() => { 
    // re-require new middleware 
    delete require.cache[require.resolve('./dist/middleware.js')] 
    latestMiddleware = require('./dist/middleware.js'); 
    // pass buffered requests to latestMiddleware 
    while (queue.length) latestMiddleware.apply(void 0, queue.shift()); 
}); 

app.use((req, res, next) => { 
    if (latestMiddleware) { 
     latestMiddleware(req, res, next); 
     return; 
    } 
    queue.push([req, res, next]); 
}); 

app.listen(6060); 

latestMiddleware özel mantık yazmak zorunda kalmadan yeni paketlenmiş ortakatmanını başvuru basitçe anlamına gelir: Burada

bir örnek bağımlılık grafiğindeki diğer modülleri güncellemek için

Bu arada, webpack-hot-server-middleware tarafından kullanılan tam olarak aynı tekniktir, tek fark webpack-hot-server-middleware'in sunucudaki yeniden yüklenen evrensel uygulamalara daha fazla yönelmesidir.