介绍react相关包安装失败的解决方法

在开发React应用时，常常需要安装一些关键的依赖包，其中包括了 react, react-dom, react-scripts 和 cra-template 等。然而，在安装过程中，我们可能会遇到安装失败的情况。本篇文章将会讨论这些问题并提供一些可能的解决方法。

安装失败的情况

1. 安装react时失败

在执行以下命令时，我们可能会遇到无法安装 react 的情况：

npm install react --save

• 错误示例1：

npm ERR! code ECONNREFUSED
npm ERR! errno ECONNREFUSED
npm ERR! request to https://registry.npmjs.org/react failed, reason: connect ECONNREFUSED 127.0.0.1:8080
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxx/.npm/_logs/2021-06-30T12_54_44_818Z-debug.log

• 错误示例2：

npm ERR! code EINTEGRITY
npm ERR! errno EINTEGRITY
npm ERR! sha512-6N1+VABFLVETGXxztV1+vfuDUB3xVXpZoYThrY+meZaVe3Zw5h5lON+LyrjpxdL0ziyGbwsO9AJB1EdmhsEuw== integrity checksum failed when using sha512: wanted sha512-6N1+VABFLVETGXxztV1+vfuDUB3xVXpZoYThrY+meZaVe3Zw5h5lON+LyrjpxdL0ziyGbwsO9AJB1EdmhsEuw== but got sha512-H1Npsyg9XN+Bc81V7JU6QbZVebwI6yzfE6ftWW90OL+v3qWx9XGSEHgzemHTPzD81ZsWw4YSdpnj0ndTJPBzTg==. (10032 bytes)
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxx/.npm/_logs/2021-06-30T13_01_18_409Z-debug.log

2. 安装其他依赖包时也失败

在安装其他依赖包时，我们也可能会遇到类似的问题：

npm install --save-dev react-scripts

• 错误示例1：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-dom@17.0.2
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^17.0.2" from the root project
npm ERR!   peer react-dom@">= 16.9.0 < 18.0.0" from @testing-library/react@12.0.0-next.4
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^12.0.0-next.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/xxxxx/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxx/.npm/_logs/2021-06-30T13_08_08_478Z-debug.log

• 错误示例2：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: webpack@5.38.1
npm ERR! node_modules/webpack
npm ERR!   webpack@"^5.38.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.36.0 || ^5.0.0" from terser-webpack-plugin@4.2.3
npm ERR! node_modules/terser-webpack-plugin
npm ERR!   terser-webpack-plugin@"^4.2.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/xxxxx/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxx/.npm/_logs/2021-06-30T13_10_33_379Z-debug.log

解决方法

1. 使用淘宝镜像

通过使用淘宝镜像，我们可能会避免因网络问题而导致的超时等问题。可以采用以下命令：

npm config set registry https://registry.npm.taobao.org

2. 使用cnpm

cnpm是一个淘宝镜像的命令行工具，使用它可以解决一些安装失败的问题。请使用以下命令进行安装：

npm install cnpm -g --registry=https://registry.npm.taobao.org

在之后的安装过程中，将 npm install 替换成 cnpm install 就可以安装。

3. 使用npm命令的 --force 参数

使用 --force 参数，我们可能会强制执行一些不当操作。例如，我们可以执行以下命令强制安装react：

npm install react --save --force

但是，使用这个方法可能会引起一些版本不兼容、依赖错误等问题。

4. 使用npm命令的 --legacy-peer-deps 参数

该参数与在根目录中使用 .npmrc 文件，将 legacy-peer-deps=true 写入其中，效果相似。

但是，这个方法也可能会引起依赖错误等问题。我们可以执行以下命令将其运用于安装其他依赖包时：

npm install --legacy-peer-deps

总结

在我们开发 React 应用时，由于种种原因，我们可能会遇到安装关键依赖包失败的情况。在这篇文章中，我们探讨了一些解决方案，希望能够帮助你在你的应用中使用React时更好地处理这些问题，让开发过程更加顺畅。