Question

直到现在，我一直在为项目使用 create-react-app ，而 express-server和react client都位于各自的文件夹中。

>

但是，我现在正尝试避免使用create-react-app，以便真正了解所有内容。我正在阅读黑客中午的文章，该文章解释了如何设置对打字稿和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')));

最后，启动命令如下所示：

“开始”：“ npm运行构建&&节点server.js”

因此，我假设客户端和服务器在同一端口上启动。

您为什么要这样做？有什么利弊吗？

Answer 1

的确，这将允许您使用与express相同的服务器进行开发，并且Web Pack会使用对文件所做的任何更新来连续更新dist / index.html文件。这样做并没有太多的缺点，因为这只是为了开发。但是通常在产品上，您将拥有一个将要服务的构建文件。而且它不会运行web pack-dev-middleware。构建服务器后。为了生产的目的，您可能只需要静态资产。但是通常，如果您要进行服务器端渲染和/或代码拆分，即使是主要提供客户端文件的服务器也可能需要服务器。

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

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

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

如果您mv server.js index.js（和npm i -g yarn）有可能。

要注意的另一件事是构建步骤。

进一步说明：

该命令运行构建步骤，因此请检查package.json中运行的“ build”：键。该命令可能不会以代码1退出（终端进程的任何退出代码大于0都会导致错误，并且不会通过&&）。大概，package.json中描述的构建过程将获取所有javascript和CSS文件，并将它们放入index.html文件，然后只要有人访问“ /”路径，该文件就会发送到客户端。

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

res.sendFile（path.resolve（__ dirname，'dist'，'index.html'））; 如果有人碰到“ /”路径，就会发生这种情况。

快递服务器启动客户端

1 个答案: