Javascript 在单个进程/同一端口上具有节点后端的网页包，正面和背面都具有热重新加载功能…；？

我有一个非常标准的设置，其中有一个节点后端，它将SPA作为一个Web包包提供服务，还有一个为SPA应用程序提供服务的api。后端正在使用koa2

因此，我已经有了热重新加载工作的前端部分刚刚好，但我现在有一点更多的工作在后端，需要使我的往返更快

我想知道最好的方法是什么。我的出发点是：

1.从网页包引导

膝关节炎，在WebPoad配置中添加了KOA作为中间件，

serve: {
  add: app => {
    require('./src/node/backend')(app)
}
....

然而，这不会热加载后端，这是相当痛苦的，因为我必须重新启动整个webpack服务命令的后端更改

于是我试着

2使用webpack作为中间件从节点后端引导 这也适用于前端，但我仍然没有重新加载后端，所以基本上是相同的经验

3.将Web包开发服务器和后端作为不同的进程运行。 <>这很好，然后我可以使用 NODEMON/CODE>为膝关节炎做后端，这对我来说已经足够好了，但是我必须对端口进行一些洗牌。p> 我猜WebpackDevServer/WebpackServe可以充当代理并将内容传递到后端，除非它击中我的任何前端内容。但这一切都让人觉得乏味。我宁愿把它粘在同一个端口上

那么，有没有其他简单的方法让两个构建热重新加载，但仍在同一端口上同时运行

---

我发现了这个项目，这可能很有趣，但我真的觉得有必要问一下我是否遗漏了一些更明显的东西，因为我真的很高兴重新启动我的服务器nodemon风格…（它又小又快）

经过广泛的搜索，我找到了一些解决这个问题的工具，但他们也都使用webpack捆绑服务器端代码，我觉得这对我来说太过分了

最后，我为服务器端进行了应用程序内重新加载，选择了上面的备选方案2。所以对于膝关节炎，我只添加了一个文件表，使DEV服务器的要求缓存无效：

const chokidar = require('chokidar')
const watcher = chokidar.watch('.')
watcher.on('ready', () => {
  watcher.on('all', () => {
    Object.keys(require.cache).forEach(function(id) {
      if (id.indexOf('src/node') > 0 && id.indexOf('node_modules') < 0) {
        delete require.cache[id]
      }
    })
  })
})

然后，我在所有管线定义中都会使用这些定义，如：

const use = app.use.bind(app)
reloadable('./auth').then(use)
reloadable('./users').then(use)
reloadable('./ingredients').then(use)

这对我来说已经足够好了

const reloadable =
  process.env.NODE_ENV === 'development' ? id => (ctx, next) => require(id).then(r => r(ctx, next)) : id => require(id)

const use = app.use.bind(app)
reloadable('./auth').then(use)
reloadable('./users').then(use)
reloadable('./ingredients').then(use)