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
    });
});

不确定代码中的注释会是什么样的？！

Answer 1

一种常见的方法是使用nodemon，它会在文件发生变化时重新启动Node进程，它可以直接替代Node cli，例如。

$ nodemon server.js

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

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

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

1 个答案: