使用 React 和 Express 提供更好的开发解决方案答案

【问题标题】：Better solution to development with React and Express使用 React 和 Express 提供更好的开发解决方案
【发布时间】：2018-07-18 09:27:51
【问题描述】：

tl;dr:如何创建一个前端为 React 后端为 Express 且只有一个 package.json 和 node_modules 文件夹的项目？

在创建具有 React 前端和 Express 后端的应用程序时，我希望有这样的结构：

客户端
- 客户资料
服务器
- 服务器的东西
.gitignore
package.json
等等……

请注意，React 前端是使用 create-react-app 构建的

“客户端的东西”和“服务器的东西”纯粹是前端和后端代码。然而，我能找到的最好的解决方案（唯一的解决方案？）类似于this。客户端和服务器在两个单独的服务器上运行，客户端请求被代理到服务器。这个解决方案很好，除了它需要 2 如果不是 3 package.json。我想保持客户端和服务器代码应该分开，但仍然在同一个项目和 repo 中，并带有 single package.json 和 node_modules 文件夹。

我了解客户端和服务器之间的关注点分离，我认为我所追求的满足这一点，但如果不满足，请告诉我。

【问题讨论】：

在您的情况下拥有一个 package.json 文件到底有什么问题？
@Rishat 好吧，只有一个 package.json 是我的目标。如果您的意思是 more 不止一个，那么我想这是个人喜好。我也听说只有一个是个好习惯。如果事实证明没有更好的解决方案，我可以使用我想链接的文章之类的东西。只是偏好:)
据我了解，只有一个 package.json 和一个 node_modules 文件夹更为常见。我有一个以这种方式设置的快速服务器的反应应用程序。我还为 express 服务器使用了代理，但仍然只有一个 package.json 文件。也许这个设置的某个地方有些混乱？
@mtmoran 我很想知道你做了什么来完成这件事。也许你可以写一个详细的答案或给我一个链接？

标签： javascript node.js reactjs express create-react-app

【解决方案1】：

这里是glossa，这是一个利用您正在寻找的设置的项目。

在src 我有我的create-react-app。（现在我已经退出了我的项目，但不要让你感到困惑。）在同一个目录中，我有我的快速服务器。

如果你不想在同一个目录中，选项是创建一个符号链接或弹出你的 create-react-app 并从你的 webpack 配置中删除 ModuleScopePlugin。这个answer 提供了该场景的更多详细信息。

您必须在 package.json 中添加代理。目前我的在master分支上是这样设置的。

"proxy": "http://localhost:8080",

我的快递服务器在 8080 上运行

【讨论】：

感谢您的示例，我认为这可能与我将得到的一样接近。最初，我希望有一些简单的东西，比如使用 create-react-app，在它旁边安装一个快速服务器，并且能够以某种方式依赖一个 package.json。它似乎具有我需要手动设置 webpack、babel 等的那种配置，就像你对 Glossa 所做的那样。
好吧，我没有手动设置 webpack，虽然我用 babel 做了，所以我可以用 es6 编写 express 服务器。你用 webpack 看到的所有文件都是你 eject 你的 create-react-app 看到的。当您运行 create-react-app 时，它在“幕后”运行因此，如果您退出应用程序，您会看到相同的内容。但我也不确定你在哪里看到多个 packagae.json 文件？
如果不弹出 create-react-app，我相当肯定你不能移动 node_modules 或 package.json 而不会遇到 react-scripts 的问题（如果我错了，请纠正我）。假设是这种情况，我在客户端有一个 package.json 用于客户端依赖项、代理、脚本等，而在服务器中有一个 package.json 用于服务器依赖项、脚本等。我还有一个顶级 package.json 用于同时运行客户端和服务器，分别运行它们等等。这些是我实际与之交互的脚本。
可以想象，您可以将服务器放在客户端目录之外，但是，您必须弹出 create-react-app 并修改 webpack.config 文件（或创建符号链接）。或者您需要将您的 express 应用程序放在您的 src 目录中，因为对 create-react-app 的限制已经定义了。
我的决定是将我的 express 服务器移动到 src，因为这将有助于我使用 es6，并且不需要修改 webpack 配置。理想情况下，我会让它们更加独特，但无论哪种方式，您仍然只需要一个 package.json 文件。

【解决方案2】：

我在 github 中有一个示例项目：https://github.com/jmaister/babel-express-webpack-starter

它只有一个 package.json 来下载客户端和服务器依赖项。

此外，它还为客户端构建：

npm run webpack

并为服务器启动：

npm run start

【讨论】：

这太好了，谢谢！我想我正在寻找一个完美的场景，我可以将 create-react-app 与 express 一起使用，并且只有 1 个 package.json，但这似乎是不可能的。再次感谢您的样品:)