我有基于 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 和模块?)
最基本的结构是有一个root包含frontend和backend文件夹的文件夹。由于您正在谈论MERN**堆栈,因此您将在后端环境package.json内部有一个,并在您这边有一个。后端服务器和前端客户端是两个完全独立的东西,所以是的,它们都有自己的 node_modules 文件夹。在后端,您可能会为您的 Node 运行时安装类似的东西,以便更方便地与您的等通信,而在您的前端,您将拥有 您的前端框架,用于状态管理等。此外,根据您已在 package.json 文件中列出的内容,当您单独运行时,它将安装在这两个文件夹中。如果您想安装其他软件包,只需在您需要它的特定文件夹(后端或/和前端)内运行(不带“+”和引号)。NodeJSpackage.jsonReact**Express``Mongoose``MongoDB``React``Redux``npm install npm install + "the name of the package"
root
frontend
backend
package.json
NodeJS
React
Express``Mongoose``MongoDB``React``Redux``npm install
npm install + "the name of the package"
希望对您有帮助。看看这些图片,尤其是第二张。
应用程序结构
文件夹结构
更新:
在开发中,我建议安装另外两样东西:
npm i -D nodemon
npm i -D concurrently
注意:该-D标志将把它们安装为devDependencies。
-D
devDependencies
nodemon会跟踪每个文件更改并重新启动后端服务器。因此,很明显它应该安装在“后端”文件夹内。您所要做的就是进入文件package.json(后端)并添加一个新脚本。如下所示:
nodemon
"scripts": { "start": "node app.js", // in production "dev": "nodemon app.js", // in development }
concurrently允许您同时启动前端和后端。我建议在顶级根文件夹(包含前端和后端的文件夹)内初始化一个新的 Node 项目。您可以使用命令执行此操作npm init,然后concurrently在那里安装包。
concurrently
npm init
现在,打开*根*package.json文件夹中新创建的文件并编辑开始部分,如下所示:
"scripts": { "dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" " }
这将进入backend文件夹并运行dev命令(与我们刚刚配置的相同),这样它就会启动nodemon。此外,它还将进入frontend文件夹并运行默认start命令 - 这正是我们想要的。
dev
start
如果您保留了文件夹结构,安装了所有依赖项(包括我上面提到的另外两个),更改了文件夹package.json内的文件root,您将能够使用一个简单的命令启动它们:
npm run dev// 执行此操作时,请确保您位于根文件夹内:)
npm run dev