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

Question

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

- /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和modules？）

Answer 1

最基本的结构是有一个根文件夹，其中包含前端和后端文件夹。既然您讨论的是MERN堆栈，那么在NodeJS后端环境中应该有一个package.json和一个package.json用于React方面。后端服务器和前端客户机是两个完全独立的东西，所以是的，它们都有自己的node_modules文件夹。在后端，您可能已经为节点运行时安装了Express，为与MongoDB进行更方便的对话安装了MongoSe，等等；在前端，您将使用React作为前端框架，Redux进行状态管理，等等。此外，根据您已经在package.json文件中列出的内容，当您单独运行NPM install时，它将安装在这两个文件夹中。如果要安装其他软件包，只需在需要的特定文件夹（后端或/和前端）中运行npm install+“软件包的名称”（不带'+'和引号）。

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

文件夹结构

null

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

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

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

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

npm运行dev//这样做时请确保您在根文件夹中：）