ノード・サーバー用ホット・モジュール置換

Question

したがって、WebpackとReactをHMRで実行しています。本当にうまくいって、つかの間の一部を奪ってください。

開発をスピードアップするために、JavaScriptで書かれた基本APIをReact HMRを提供しているExpress Webサーバーに追加します。

私はこの非常に非常に難しい（不可能な放映）と考えていたでしょうが、Webサーバーを再起動して、すべてのAPIファイルを再ロードして（以前に開いたタブで再接続する） APIが変更されましたか？

現在のエクスプレス構成：

import express from 'express'; 
import webpack from 'webpack'; 
import path from 'path'; 
import config from '../webpack.config.dev'; 
import open from 'open'; 
import bodyParser from 'body-parser'; 
import session from 'express-session'; 
import cookieParser from 'cookie-parser'; 

import clientApi from '../backend/client.api'; 
import sessionApi from '../backend/session.api'; 
import profileApi from '../backend/profile.api'; 
import * as loginApi from '../backend/login.api'; 
import IdentityService from '../backend/identity-service'; 
/* eslint-disable no-console */ 

const port = 5003; 
const app = express(); 
const compiler = webpack(config); 

app.use(bodyParser.json()); // parsing application/json 
app.use(cookieParser()); // parsing cookies 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.use(require('webpack-hot-middleware')(compiler)); 

app.set('trust proxy', 1); // trust first proxy 

app.use(session({ 
    secret: 'keyboard cat', 
    resave: false, 
    saveUninitialized: true 
})); 

app.get('/login', function (req, res) { 
    res.sendFile(path.join(__dirname, '../src/login.html')); 
}); 

loginApi.configureUnsecure(app); 

app.get(/^\/(?!api).*$/i, function(req, res) { 
    res.sendFile(path.join(__dirname, '../src/index.html')); 
}); 

const identityService = new IdentityService(); 
app.use(function (req, res, next) { 
    let authenticated = identityService.checkAuthentication(req); 

    if (authenticated) { 
     next(); 
    } else { 
     res.sendStatus(401); 
    } 
}); 

clientApi(app); 
sessionApi(app); 
profileApi(app); 
loginApi.configureSecure(app); 

app.listen(port, function(err) { 
    if (err) { 
     console.log(err); 
    } else { 
     open(`http://localhost:${port}`); 
    } 
}); 

あなたはおそらくガルプタスクからこれを実行しますか？

同様：

gulp.task('watch-backend',() => { 
    gulp.watch('./backend/**/*.*',() => { 
     // close down old server in node 
     // spin up new server in node 
    }); 
}); 

コメントはコード内でどのように見えるか、本当にわかりません！

Answer 1

一般的なアプローチは、ファイルが変更されたときにノードプロセスを再起動するnodemonを使用することです。これはノードcliの直接の置き換えです。あなたのAPIは、あなたのWebPACK資産と同じ急行のサーバに搭載されている場合

$ nodemon server.js 

ただし、WebPACKのコンパイルは、寒さから再実行されますので、再起動するのは非常に遅いことがわかります。

したがって、WebpackアセットのものとNode APIのものを別々のポートで2台起動する方が良いかもしれません。