节点 Web 服务器的热模块更换

Question

所以，我已经让 Webpack 和 React 与 HMR 一起运行。效果真的很好，排除一些陷阱。

为了加快开发速度，我正在将用 JavaScript 编写的基本 API 添加到为 React HMR 提供服务的 Express Web 服务器中。

我原以为这可能非常非常非常困难（不可能播放）.. 但是当某些后端 API 时，是否可以让 Web 服务器重新启动并重新加载所有 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 任务中运行它吗？

喜欢：

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

不太确定 cmets 在代码中会是什么样子？！

Answer 1

一种常见的方法是使用nodemon，它会在文件更改时重新启动 Node 进程，它是 Node cli 的直接替换，例如

$ nodemon server.js 

但是，如果您的 API 与您的 Webpack 资产安装在同一台快速服务器上，您会发现重新启动非常慢，因为 Webpack 编译将从冷状态重新运行。

因此，您可能会发现在不同端口上启动两台服务器会更好，一台用于您的 Webpack 资产，另一台用于您的 Node API。