react中安裝依賴時的問題【集合】

?依賴升級/更新

1、?npm install @ --save-dev 與??npm install @ 的區別

1. ?安裝位置（依賴類型）?

2. ?package.json?中的區別?

3. ?示例

4. ?何時使用哪種方式?

? 2、npm install @ 和? yarn add @ 有什么不一樣嗎

?命令語法?：

?鎖文件?：

?安裝速度?：

?依賴解析?：

?輸出信息?：

?清理緩存?：

3、?安裝依賴時，顯示There appears to be trouble with your network connection.

?4、 src/?package.json?中的依賴?版本與?node_modules包中?中的版本不一致

方法 1: 使用?yarn add?命令

方法 2: 手動編輯?package.json

驗證更改

注意事項

5、依賴版本鎖定

npm 鎖定版本方式

?依賴升級/更新

// @edsp/apollo-formy依賴本來3.0.0 現在升級到 4.0.0 npm install @edsp/apollo-form@4.0.0
// 或者
yarn add @edsp/apollo-form@4.0.0

1、?npm install <package-name>@<version>?--save-dev 與??npm install <package-name>@<version> 的區別

比如 npm install @edsp/apollo-form@4.0.0 --save-dev?和?npm install @edsp/apollo-form@4.0.0?的主要區別在于包的安裝位置（即依賴類型），而不是包本身或版本。以下是具體分析：

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/apollo-form@4.0.0? 和 yarn add @edsp/apollo-form@4.0.0有什么不一樣嗎

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 則是順序安裝。

?依賴解析?：
npm 和 yarn 在解析依賴時可能會有不同的行為，尤其是在處理依賴沖突時。

?輸出信息?：
npm 和 yarn 的輸出信息格式不同，yarn 的輸出通常更簡潔和易于閱讀。

?清理緩存?：

對于 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/apollo-form@4.0.0 --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?命令
?直接更新版本?:
使用?yarn add?命令來指定你想要的版本。這將更新?package.json?中的版本，并重新安裝該包。
yarn add @edsp/apollo-form@4.0.0
這條命令會將?@edsp/apollo-form?的版本更新為?4.0.0，并在?package.json?的?dependencies?中反映出來。
方法 2: 手動編輯?package.json
?打開?package.json?文件?:
使用文本編輯器打開項目根目錄下的?package.json?文件。
?找到并修改版本?:
在?dependencies?部分找到?@edsp/apollo-form，然后將其版本更改為所需的版本（例如?4.0.0）。
"dependencies": { "@edsp/apollo-form": "4.0.0", // 其他依賴項 
}
?重新安裝依賴?:
保存?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 vite@2.x 鎖定該版本
@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 命令安裝依賴

依賴名稱	需鎖定版本	備注
@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	vite@2.x 鎖定該版本
@use-gesture/core	10.3.0
@finclip/clender-compile	1.0.36
uglify-js	3.17.4
engine.io-client	3.5.3

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 達到鎖定版本的目的。