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和模块？)

Answer 1

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

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

应用结构

文件夹结构

更新:

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

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

注意:-D flag 会将它们安装为 devDependencies 。

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

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

---

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

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

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

这将做的是进入 backend 文件夹并运行 dev命令(与我们刚刚配置的相同)，因此将启动 nodemon .此外，它还将进入 frontend 文件夹并运行默认的 start command - 这正是我们想要的。

如果你保留文件夹结构，安装所有依赖项(包括我上面提到的额外两个)，更改package.json root 中的文件 文件夹，您可以通过一个简单的命令来启动它们:

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