react nodejs项目中的多个package.json文件

Posted 2023-03-07

【中文标题】react nodejs项目中的多个package.json文件

【英文标题】：multiple package.json files in react nodejs project

【发布时间】：2019-10-09 13:25:31

【问题描述】：

我是 react 新手，我正在尝试创建一个使用 react、node 和 express 的项目。自己设置正确反应有很多问题，我决定使用 create-react-app。

我在网上找到了一堆教程，其中很多似乎建议将前端和后端分离到不同的目录中，从而产生两个 package.json。

所以项目结构看起来像这样：

Root
|
------client
|       |
|       -------package.json with front end dependencies
|
package.json with the back end dependencies

客户端目录是使用“npm init react-app”创建的，还包含具有 react-scripts 的 package.json。目前，如果我在客户端目录中使用命令“npm run build”，它会在根文件夹中创建一个没有后端文件的构建，如果我在根文件夹中使用“npm run build”，它不起作用，因为我没有该 package.json 中的 create-react-app 脚本。

我的主要问题是，如果我有两个 package.json，并且像这样拆分前端和后端是否是正常/最佳实践，我将如何构建我的项目？

任何建议将不胜感激。

【参考方案1】：

这种文件夹结构是最常用的结构之一。您实际上是在分离前端和后端，这将导致可扩展的架构。

要使用单个命令构建项目，您需要安装依赖项concurrently。它将一次启用多个命令。然后更改您的根package.json。

下面是一个例子package.json：

"scripts" : 
     "build-client": "npm run build --prefix <FRONTEND_FOLDER NAME>",
     "build": "<YOUR SERVER BUILD COMMAND>",
     "build-project" : "concurrently \"npm run build\" \"npm run build-client\""

希望对你有帮助！！！

【讨论】：

谢谢，这帮助很大。使用我的前端 package.json 构建命令是使用 create-react-app 中的“react-scripts build”设置的，但我的后端 package.json 没有构建脚本设置。你知道 npm 是否有默认的构建命令（我尝试了 npm build 但不起作用）或者我如何能够创建一个类似于 create-react-app 的构建命令的脚本。

能否请您发布您的后端和前端的package.json？但是，服务器并不是要构建的，它们只是运行。一个典型的命令是node index.js

【参考方案2】：

我认为您必须将 CRA（create-react-app）和后端服务器（express）分开。 这意味着您必须在不同的端口中前后运行，然后制作一个可以前后运行的 npm 脚本。

像这样。

ROOT/package.json

"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""