介绍
在 React 中开发应用程序需要外部依赖项，即其他 React 开发人员发布的可重用组件，您可以在项目中使用这些组件。使用npm上提供的 React 组件并根据项目需求对其进行修改以创建该组件的不同版本始终是一个好主意。为了做到这一切，您必须知道如何向 React 项目添加依赖项。
本指南将引导您完成为 React 组件安装和向package.json文件添加依赖项的简单过程。
package.json 文件
当你使用 Create-React-App 创建 React 项目时，你会在根文件夹中获得一个如下所示的package.json文件：
{
"name": "react-dependencies-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
...
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
此文件以 JSON 格式跟踪您在项目中使用的所有不同类型的依赖项。在 React 项目上安装依赖项的方法基本上有两种。第一种方法是直接运行特定命令以将该依赖项安装为 npm 包。此过程会自动使用所需的详细信息（即依赖项的名称、版本和类型）更新 package.json文件。另一种方法是先手动更新 package.json，然后运行npm install命令来安装或更新该依赖项。
自动添加依赖项
Create-React-App 的CLI（命令行界面）为您提供了一种向package.json文件添加依赖项的简便方法。在 npmjs.com 上查找安装依赖项的特定命令，并在项目的根目录中运行它。通过 npm 安装任何依赖项的一般命令是：
npm install <package-name> --save-dev
--save标志不是强制性的，仅当您希望将此依赖项作为开发依赖项安装时才需要-dev标志，这意味着您只需要该包用于本地开发和测试目的，而不是用于生产。
假设您想要为项目中的某个组件安装 React Router，以便为您处理路由。
npm install react-router-dom
上述命令在你的项目中安装 React Router 并自动将此依赖项添加到你的package.json文件中。
//package.json
{
...
"react-router-dom": "^5.2.0",
...
}
包的名称作为键添加，其安装版本作为package.json文件中的相应值添加，如上所示。
手动添加或更新依赖项
有时您需要使用依赖项的特定版本，可能是与您的项目更兼容的旧版本。您可以将package.json文件指向依赖项的特定版本，然后运行npm install命令以仅在项目中安装该版本的依赖项。假设您想使用react-router-dom 4.2.2而不是最新版本。
{
...
"react-router-dom": "^4.2.2",
...
}
现在运行以下命令：
npm install
现在你已经安装了react-router-dom 4.2.2 版本。你也可以使用此方法直接安装依赖项。
首先，让我们通过运行以下命令继续卸载react-router-dom ：
npm uninstall react-router-dom
如果你现在检查你的package.json文件，你不会看到文件中列出的react-router-dom 。将其添加到文件中，如下所示：
{
...
"react-router-dom": "^5.2.0",
...
}
现在运行以下命令：
npm install
您现在可以在您的项目中使用此依赖项。
结论
当您想要基于依赖项的特定版本创建 React 组件时，您可以查找这些版本并手动编辑package.json文件以更新或将该依赖项添加到项目中的指定版本。在所有其他情况下，您应让 Create-React-App 的 CLI 为您处理此过程。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
