快递服务器启动反应客户端

Question

到目前为止，我一直在为我的项目使用 create-react-app，express-server 和 react 客户端都在各自的文件夹中。 p>

但是，我现在试图避免 create-react-app 以便真正了解一切在后台是如何工作的。我正在阅读一篇 Hacker Noon 文章，该文章解释了如何使用 typescript 和 webpack 设置响应。在本文中，他们还拥有位于客户端根目录的 express 服务器，它自己编译所有内容：

const path = require('path'),
   express = require('express'),
   webpack = require('webpack'),
   webpackConfig = require('./webpack.config.js'),
   app = express(),
   port = process.env.PORT || 3000;
app.listen(port, () => { console.log(`App is listening on port ${port}`) });
app.get('/', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
let compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
   noInfo: true, publicPath: webpackConfig.output.publicPath, stats:    { colors: true }
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.resolve(__dirname, 'dist')));

最后，启动命令是这样的：

"start": "npm run build && node server.js"

所以我假设客户端和服务器在同一个端口上启动。

你为什么要这么做？有什么优缺点吗？

Answer 1

确实，这将允许您使用与 express 相同的服务器进行开发，并且 webpack 将使用您对文件所做的任何更新不断更新您的 dist/index.html 文件。这并没有太大的缺点，因为这只是为了开发。但通常在 prod 上，您将拥有一个您将提供的构建文件。并且它不会运行 web pack-dev-middleware。一旦你建立了你的服务器。出于生产目的，您可能只需要静态资产。但通常情况下，如果您想要进行服务器端渲染和/或代码拆分，即使主要服务于客户端文件的服务器也可能需要服务器。

命令："npm run build && node server.js" 将在终端中运行 bash/cmd 命令。 npm run build 是一个步骤，因为使用了&&，如果该命令成功，则运行下一个命令 node server.js 这是一个奇怪的命令，我可能会运行 node ./ （并将服务器作为索引.js) 或者至少只写节点服务器。

我希望在您的 package.json 中看到的内容：

"start": "yarn build && node ./"

如果你mv server.js index.js（和npm i -g yarn），这将是可能的。

另一件需要注意的事情是构建步骤的作用。

进一步说明：

该命令运行构建步骤，因此请检查您的 "build": 密钥在您的 package.json 中运行的内容。 此命令可能不会以代码 1 退出（任何高于 0 的终端进程的退出代码都会导致错误并且不会通过 &&）。 据推测，package.json 中描述的构建过程将获取所有 javascript 和 CSS 文件并将它们放入 index.html 文件中，然后每当有人访问“/”路径时将其发送到客户端。

成功后，它会启动你在上面放代码的服务器。

res.sendFile(path.resolve(__dirname, 'dist', 'index.html')); 如果有人遇到“/”路径，就会发生这种情况。