react中安装依赖时的问题 【集合】

目录

依赖升级/更新

[1、 npm install @ --save-dev 与 npm install @ 的区别](#1、 npm install @ --save-dev 与 npm install @ 的区别)

[1. ‌安装位置（依赖类型）‌](#1. ‌安装位置（依赖类型）‌)

[2. ‌package.json 中的区别‌](#2. ‌package.json 中的区别‌)

[3. ‌示例](#3. ‌示例)

[4. ‌何时使用哪种方式‌](#4. ‌何时使用哪种方式‌)

[2、npm install @ 和 yarn add @ 有什么不一样吗](#2、npm install @ 和 yarn add @ 有什么不一样吗)

‌命令语法‌：

‌锁文件‌：

‌安装速度‌：

‌依赖解析‌：

‌输出信息‌：

清理缓存‌：

[3、 安装依赖时，显示There appears to be trouble with your network connection.](#3、 安装依赖时，显示There appears to be trouble with your network connection.)

[4、 src/ package.json 中的依赖 版本与 node_modules包中 中的版本不一致](#4、 src/ package.json 中的依赖 版本与 node_modules包中 中的版本不一致)

[方法 1: 使用 yarn add 命令](#方法 1: 使用 yarn add 命令)

[方法 2: 手动编辑 package.json](#方法 2: 手动编辑 package.json)

验证更改

注意事项

5、依赖版本锁定

[npm 锁定版本方式](#npm 锁定版本方式)

---

依赖升级/更新

// @edsp/apollo-formy依赖本来3.0.0 现在升级到 4.0.0 

npm install @edsp/[email protected]
// 或者
yarn add @edsp/[email protected]

1、 npm install <package-name>@<version> --save-dev 与 npm install <package-name>@<version> 的区别

比如 npm install @edsp/[email protected] --save-dev 和 npm install @edsp/[email protected] 的主要区别在于包的安装位置（即依赖类型），而不是包本身或版本。以下是具体分析：

1. ‌**安装位置（依赖类型）**‌

• ‌**--save-dev** ‌：
  • 将包安装为开发依赖（devDependencies）。
  • 开发依赖是仅在开发过程中需要的包，例如构建工具、测试框架等。
  • 这些依赖不会在生产环境中使用。
• ‌不带 --save-dev ‌：
  • 将包安装为生产依赖（dependencies）。
  • 生产依赖是应用程序在生产环境中运行时需要的包。

2. ‌package.json 中的区别‌

• 使用 --save-dev 时，包会被添加到 package.json 文件的 devDependencies 部分。
• 不使用 --save-dev 时，包会被添加到 package.json 文件的 dependencies 部分。

3. ‌示例

3.1 使用 --save-dev：

{
  "devDependencies": {
    "@edsp/apollo-form": "4.0.0"
  }
}

3.2 不使用 --save-dev：

{
  "dependencies": {
    "@edsp/apollo-form": "4.0.0"
  }
}

4. ‌何时使用哪种方式‌

• ‌使用 --save-dev ‌：
  • 当你只需要在开发环境中使用该包时，例如构建工具（如 Webpack、esbuild）、测试框架（如 Jest、Mocha）等。
• ‌不使用 --save-dev ‌：
  • 当你需要在生产环境中使用该包时，例如应用程序的核心功能依赖。

2、npm install <package-name>@<version> 和 yarn add <package-name>@<version> 有什么不一样吗

比如 npm install @edsp/[email protected] 和 yarn add @edsp/[email protected]有什么不一样吗

npm install 和 yarn add 是两种常用的包管理工具命令，用于安装 Node.js 项目中的依赖包。虽然它们的功能相似，但在一些细节上有所不同。以下是它们之间的主要区别：

‌命令语法 ‌：

• npm install <package-name>@<version> ：使用 npm 安装指定版本的包，并将其添加到 dependencies中。
• yarn add <package-name>@<version>：使用 yarn 安装指定版本的包。默认情况下，yarn 会根据上下文将包添加到 dependencies 或 devDependencies 中。如果当前目录有 package.json 文件，yarn 会根据文件中的 scripts 和其他配置自动判断。

‌锁文件 ‌：

• npm 使用 package-lock.json 文件来锁定依赖的版本。
• yarn 使用 yarn.lock 文件来锁定依赖的版本。

‌安装速度 ‌：

yarn 通常比 npm 更快，因为它并行安装依赖，而 npm 则是顺序安装。
4.

‌依赖解析 ‌：

npm 和 yarn 在解析依赖时可能会有不同的行为，尤其是在处理依赖冲突时。
5.

‌输出信息 ‌：

npm 和 yarn 的输出信息格式不同，yarn 的输出通常更简洁和易于阅读。
6.

清理缓存 ‌：

• 对于 npm：npm cache clean --force
• 对于 yarn：yarn cache clean

‌尝试使用不同的包管理工具‌：如果 npm 遇到问题，可以尝试使用 yarn，反之亦然。

3、 安装依赖时，显示There appears to be trouble with your network connection.

网络超时了，增加网络超时时间，使用 --network-timeout

例如：

// yarn add <package-name> --network-timeout 100000      100000=100毫秒  

yarn add @edsp/[email protected] --network-timeout 100000

4、 src/ package.json 中的依赖 版本与 node_modules包中 中的版本不一致

比如 src/ package.json 中的 @edsp/apollo-form 版本与 node_modules/@edsp/ package.json 中的版本不一致，你可以通过以下步骤来更新

src/package.json 中的版本：

(node_modules/@edsp/ package.json 中的版本变了，说明下载的@edsp/apollo-form成功了)

方法 1: 使用 yarn add 命令

1. ‌直接更新版本 ‌:

   使用 yarn add 命令来指定你想要的版本。这将更新 package.json 中的版本，并重新安装该包。

   yarn add @edsp/[email protected]

   这条命令会将 @edsp/apollo-form 的版本更新为 4.0.0，并在 package.json 的 dependencies 中反映出来。

方法 2: 手动编辑 package.json

1. ‌打开 package.json 文件 ‌:

   使用文本编辑器打开项目根目录下的 package.json 文件。

2. ‌找到并修改版本 ‌:

   在 dependencies 部分找到 @edsp/apollo-form，然后将其版本更改为所需的版本（例如 4.0.0）。

   "dependencies": { 
       "@edsp/apollo-form": "4.0.0", // 其他依赖项 
   }

3. ‌重新安装依赖 ‌:

   保存 package.json 文件后，运行以下命令以重新安装所有依赖项，这将确保 node_modules 中的包与 package.json 中的版本一致。

   yarn install

验证更改

• ‌检查 package.json ‌:

  确保 package.json 中的版本已经更新为你指定的版本。

• ‌检查 node_modules ‌:

  你可以检查 node_modules/@edsp/apollo-form/package.json 文件中的 version 字段，以确认安装的版本是否正确。

注意事项

• ‌版本兼容性 ‌:

  在更改版本之前，确保新版本的包与你的项目兼容。查看包的更新日志或文档以了解可能的变更。

• ‌清理缓存 ‌:

  如果遇到安装问题，可以尝试清理 Yarn 缓存：

  yarn cache clean

  通过这些步骤，你可以确保 package.json 和 node_modules 中的 @edsp/apollo-form 版本一致。

5、依赖版本锁定

当安装依赖时，报下面依赖版本的错误时，可以根据项目需要的版本进行锁定，表格锁定版本不一定使用你的项目，供参考给出的示例

依赖名称	需锁定版本	备注
@ctrl/tinycolor	3.6.0
@adobe/css-tools	4.2.0
babel-plugin-transform-jsx-condition	0.1.2
axe-core	4.6.3
iterator.prototype	1.1.1
dompurify	3.0.5
jackspeak	2.3.3
domain-browser	4.22.0
loglevel	1.8.1
terser	4.8.1	使用 webpack v4 等项目锁定该版本
	5.29.2	使用 webpack v5 等项目锁定该版本
vite	2.9.17	[email protected] 锁定该版本
@use-gesture/core	10.3.0
@finclip/clender-compile	1.0.36
uglify-js	3.17.4
engine.io-client	3.5.3

1. 锁定版本：

package.json文件中增加resolutions配置

"resolutions": {
    "@ant-design/icons-svg": "4.2.1"
}

2. 组件市场组件模板锁定terser方式如下

package.json文件中增加resolutions配置

"resolutions": {
    "react-styleguidist-jfrog/terser-webpack-plugin/terser": "5.29.2"
}

// 或

"resolutions": {
    "@cmbc/react-styleguidist/terser-webpack-plugin/terser": "5.29.2"
}

根据模板中使用的是react-styleguidist-jfrog或@cmbc/react-styleguidist进行选择使用

3. 安装依赖方式

resolutions为yarn配置，所以需使用yarn安装依赖（如果项目中存在yarn.lock文件，先删除再安装依赖）。如项目特殊情况必须使用npm安装依赖，请将上述依赖锁定在dependencies配置下，锁定方式同resolutions配置。

4. 如果依赖安装报node版本错误，例如下图，请执行 yarn --ignore-engines 命令安装依赖

npm 锁定版本方式

在 package.json 中配置 overrides 字段（注：需npm 8及以上版本），示例（只是示例具体配置根据项目实际情况来）：

"overrides": {
    "vite": "2.9.17",
    "@webassemblyjs/ast": "1.11.6",
    "@webassemblyjs/wasm-parser": "1.11.6",
    "terser-webpack-plugin": {
        "terser": "5.29.2"
    },
    "html-minifier-terser": {
        "terser": "5.29.2"
    }
}

将项目中所有 vite、@webassemblyjs/ast、@webassemblyjs/wasm-parser 安装为指定版本，terser-webpack-plugin 和 html-minifier-terser 所依赖的 terser 版本指定为 5.29.2，其余 terser 版本不受影响。

‌注意 ‌：由于 overrides 字段需要 npm 8 以上版本，但 pset npm 版本为 6.x，可将本地 npm 版本升级为 8.x 安装成功的 package-lock.json 进行提交，同时 pset 上使用 npm 构建，可使 pset 达到锁定版本的目的。