如何从Express Server开始运行react-scripts？

Question

我想运行一个由Express服务器提供服务的react应用。 即使不是解决方案，我想要获得的效果还是app.use("/", "react-scripts start") ，因此，如果服务器在"/"处收到请求，它将启动react应用，并提供文件。

我阅读了有关构建应用程序，提供bundle.js或仅将具有服务器URL的代理添加到客户端应用程序的package.json的解决方案的信息，但这不是我想要的，并且没有发现与效果类似的内容我想赚。

我不确定react-scripts start什么react-scripts start以及它如何工作，但是我之所以需要它，是因为我不想重新启动整个服务器，而每次我更改应用程序中的内容时都等到应用程序生成为止前端。

有任何想法吗？

Answer 1

您要达到的结果到底是什么？ 通常，使用create-react-app （对于react-scripts是一个实用工具）或webpack，必须始终在某个点重建该应用程序以使更改可见，因为JSX与浏览器不兼容并且必须转换为常规JS。 另外，如果仅对前端进行更改，则无需重新启动服务器。

运行react-scripts start基本上会运行内置在CRA配置中的webpack-dev-server （WDS）。 从输出构建文件的意义上讲，WDS实际上并没有构建项目，但是它仍然必须在内存中进行构建，以便甚至可以显示所有更改。 在正常的应用程序中，通过WDS进行重建的时间应该不会超过几秒钟，这就是您看到变化显而易见的最快反馈循环。

如果您将Express服务器与CRA应用程序一起运行，建议您同时查看nodemon和nodemon ，前者将允许您使用一个命令来运行服务器和React客户端，后者将自动重新启动您的服务器服务器（仅在进行后端更改时，前端更改不会触发服务器重启）。

Answer 2

react-scripts start设置开发环境并启动服务器以及热模块重新加载。 基本上，create-react-app可以帮助您启动项目而无需进行配置，因此您不必自己设置项目。

运行react-scripts build将您的项目文件react-scripts build到公用文件夹中，然后，您可以创建一个使用Express服务您的公用文件夹的server.js文件。

server.js

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, 'public');

app.use(express.static(publicPath));

app.get('*', (req, res) => {
  res.sendFile(path.join(publicPath, 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is up!');
});

运行node server.js以启动服务器。