node.js - 如何在MERN中组织后端和前端的文件结构

Question

我有基于 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.jsreactjsexpressnpm

Answer 1

最基本的结构是有一个root包含文件夹frontend的backend文件夹。由于您在谈论MERN堆栈，因此您将在后端环境package.json中拥有一个内部环境和一个面向您的事物。后端服务器和前端客户端是两个完全不同的东西，所以是的，它们都有自己的 node_modules 文件夹。在后端，您可能已经为 Node 运行时安装了类似的东西，以便以更方便的方式与您的. 等进行对话，而在您的前端，您将拥有您 的前端框架，NodeJSpackage.jsonReactExpressMongooseMongoDBReactRedux用于状态管理等。此外，根据您已经在 package.json 文件中列出的内容，当您npm install 单独运行时，它将安装在这两个文件夹中。如果您想安装其他软件包，只需npm install + "the name of the package"在您需要它的特定文件夹（后端或/和前端）内运行（不带“+”和不带引号）。

我希望这可以帮到你。看看照片，尤其是第二张。

应用结构

文件夹结构

更新：

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

1. npm i -D nodemon
2. npm i -D concurrently

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

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

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

---

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

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

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

这将做的是进入后端文件夹并运行dev命令（与我们刚刚配置的相同），以便启动nodemon。此外，它还将进入前端文件夹并运行默认start命令——这正是我们想要的。

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

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