如何在 MERN 中组织后端和前端的文件结构答案

【问题标题】：How to organise file structure of backend and frontend in MERN如何在 MERN 中组织后端和前端的文件结构
【发布时间】：2018-12-10 02:36:55
【问题描述】：

我有基于 express + mongoose 的后端。文件结构为：

- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

以及用于前端的常规基于 create-react-app 的文件夹：

- /src
-- /assets
--- index.css
-- /components
--- Somecomponent.js
-- /containers
--- App.js
-- /reducers
--- somereducers.js
- /node.modules
-- ...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

我想以适当的方式一起使用它。我想这样组织它：

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

在这个阶段我卡住了。如果客户端文件夹在服务器文件夹中，或者服务器文件夹在客户端中，我可以做到这一点。 1.但是当两个文件夹是兄弟的时候如何让它运行呢？ 2. package.json应该是什么，node.modules应该在哪里（服务器和客户端是否应该有自己的package.json和模块？）

【问题讨论】：

标签： node.js reactjs express npm

【解决方案1】：

最基本的结构是拥有一个包含frontend 和backend 文件夹的root 文件夹。由于您在谈论 MERN 堆栈，因此您的 NodeJS 后端环境中有一个 package.json 和一个 @987654330 @ 代表您的 React 方面。后端服务器和前端客户端是两个完全独立的东西，所以是的，它们都有自己的 node_modules 文件夹。在后端，您可能会为您的 Node 运行时安装 Express 之类的东西，Mongoose 以便更方便地与您的 MongoDB 交谈等，在您的前端，您将拥有您的 @987654335 @ 作为您的前端框架，Redux 用于状态管理等。此外，根据您已经在 package.json 文件中列出的内容，当您运行 npm install 单独时，它将被安装在这两个文件夹中。如果您想安装其他软件包，只需在您需要它的特定文件夹（后端或/和前端）内运行npm install + "the name of the package"（不带“+”和不带引号）。

我希望这会有所帮助。看看照片，尤其是第二张。

应用结构

文件夹结构

更新：

在开发中，我建议安装两个额外的东西：

npm i -D nodemon
npm i -D concurrently

注意：-D 标志会将它们安装为 devDependencies。

nodemon 将跟踪每个文件更改并为您重新启动后端服务器。因此，很明显它应该安装在“后端”文件夹中。您所要做的就是进入package.json 文件（后端）并添加一个新脚本。像这样的：

"scripts": {
"start": "node app.js",  // in production
"dev": "nodemon app.js", // in development
}

concurrently 允许您同时启动前端和后端。我建议在顶级 root 文件夹内初始化一个新的 Node 项目 - [包含前端和后端的文件夹]。您可以使用 npm init 命令执行此操作，然后在此处安装 concurrently 软件包。

现在，在 root 文件夹中打开新创建的 package.json 文件并编辑开始部分，如下所示：

   "scripts": {
       "dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" "
   }

这将做的是进入 backend 文件夹并运行 dev 命令（我们刚刚配置的相同），这样将启动 @987654352 @。此外，它还将进入 frontend 文件夹并运行默认的start 命令——这正是我们想要的。

如果您保留文件夹结构，安装所有依赖项（包括我上面提到的另外两个），更改 root 文件夹中的 package.json 文件，您将能够用一个简单的命令启动它们：

npm run dev // 这样做时请确保您位于根文件夹中 :)

【讨论】：

这很有帮助。如何使用一个npm start 命令同时运行后端和前端？
当然，我会用该信息更新我之前的回答，如果这也有帮助，请接受我的回答；）
@Icode4food 编辑器：VS Code 带有 Custome 主题（这意味着我自己更改了用户偏好）。您也可以通过按 CTRL + P 来完成此操作，在搜索框中输入 > Preferences: Open user settings 并编辑 editor.tokenColorCustomizations, workbench.colorCustomizations 以及您可能想要自定义以满足您的需求的所有其他内容。我有很多:) ...顺便说一句，我使用的是material-icon-theme。如果您想避免我建议的所有内容，请安装一个名为 One Dark Pro Monokai Darker 的主题。这和我得到的有点相似。干杯;)
@I'mOnlyVueman 快乐是我的全部。相信我。到最后，都是JavaScript，对吧？ - 所以，React、Angular 还是 Vue 并不重要，关键在于架构和可扩展性。祝你好运;)
@Bigga_HD，您建议将根文件夹上传到单个 GitHub 存储库还是两个单独的存储库？

【解决方案2】：

除了接受的答案之外，如果它基于业务逻辑而不是技术逻辑，则前端和后端内部的文件夹结构划分更有用。

将整个堆栈划分为独立的组件，最好不要在它们之间共享文件，这是使您的应用更易于测试和更新的最佳方式。这以最小的可能方式就是通常所说的微服务架构。

糟糕的设计：难以更新和测试：

优秀的设计：易于更新和测试：

【讨论】：

这个答案让我很感兴趣，但我觉得它缺乏理由。对于像我这样的新手，你能解释得更好一点吗？
这有点基于 django 文件结构，我发现它更易于测试和更新。每个业务组件都是一个“应用程序”。恕我直言，基于业务逻辑进行分离而不是将相同类型（类）保持在一起更容易在更大的团队中进行维护。重构变得更容易，关注点分离更清晰，领域边界更清晰。

【解决方案3】：

根据您的要求使用结构，例如基于项目范围或深度。但是请确保将端点和模型分开，所以最初有这样的设置

src/
controllers - for the endpoints
models - for the schema
server.js - or index.js

【讨论】：