Javascript 反应+；Express-在开发过程中服务什么而不是/构建什么

我使用

create-react-app

来初始化我的react-app，现在我正在从Express服务器上为react-client-app提供服务

我的应用程序结构是

project/
  build/
  server/
  src/

当我的Express服务器位于

server/

中时，我的React应用程序位于

src/

中，React应用程序将通过

npm运行构建

构建为

build/

因为我的Express应用程序服务于“构建”应用程序（如下所示，服务于

build/

目录中的文件），所以每次更改任何客户端代码时，我都需要

npm运行build

，以便我的浏览器反映更改

// server/app.js

const express = require('express');
const path = require('path');


const app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);


// Serve static assets

app.use(express.static(path.resolve(__dirname, '..', 'build')));


// sockets

require('./sockets')(io);


// serve main file

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});


module.exports = server;

由于构建步骤需要很多秒，这显然比仅使用

React scripts start

为React应用程序提供服务，并让它监视代码更改并立即在浏览器中反映代码更改要低一大步

我知道我可以使用

NODE\u ENV===“production”

来检查我是在生产还是在开发，但是考虑到我在开发，我应该提供哪些文件，而不是

build/

中的文件

---

也就是说，可能一个相关的问题是“当我使用

React脚本start

运行React服务器时，从何处为它们提供服务？”？编辑：它们是如何被监视的，以至于构建到该位置的源文件非常快？

大多数react样板文件在开发模式下使用[webpack dev server/browserify]+热重新加载，因此您的更改（只有您的更改）会被动态编译，并且您的浏览器会被监视者刷新

它基本上是一个中间件，你可以用它来表达

var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
 publicPath: webpackConfig.output.publicPath,
 quiet: true
})
app.use(devMiddleware)

---

在您的情况下，它是在后台完成的，文件都写在内存中。

这并不是问题的真正答案，但我意识到要绕过这个问题，我只想添加Express应用程序用于其他用途（例如处理套接字通信），它对React应用程序本身并不重要。所以我把

//服务静态资产

和

//服务主文件

放在

isProduction

if块中（isProduction基于NODE_ENV），在开发中，我有两个服务器在运行，React dev服务器和Express服务器，客户机会向Express服务器发出除初始index.html请求之外的所有请求。