javascript - React + Express - 在开发时用什么服务代替/构建

Question

我使用 create-react-app 来初始化我的 React 应用程序，现在我从 Express 服务器提供 React 客户端应用程序。

我的应用程序结构是

project/
  build/
  server/
  src/

我的 Express 服务器位于 server/ 中，我的 React 应用程序位于 src/ 中，React 应用程序构建为 build/使用npm run build。

因为我的 Express 应用程序提供“构建”应用程序(如下所示，从 build/ 目录提供文件)，所以每次我都需要 npm run build更改任何客户端代码，以便我的浏览器反射(reflect)更改。

// 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 应用程序并让它监视代码更改并立即将它们反射(reflect)在浏览器。

我知道我可以使用 NODE_ENV === 'product' 来检查我是在生产还是在开发，但考虑到我在开发，我应该提供的文件在哪里build/ 中的那些？

即也许一个相关的问题是“当我使用 react-scripts start 运行 React 服务器时，它们从哪里得到服务”？编辑:如何监视它们以便将源文件构建到该位置非常快？

Answer 1

大多数 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)

在您的情况下，这是在幕后完成的，文件写入内存中。