[web前端] yarn和npm命令使用
原文地址： https://blog.csdn.net/mjzhang1993/article/details/70092902/
最初接觸 yarn 還是在 0.17.10 版本，由於各種各樣的原因，使用時沒 npm 順手, 目前 yarn 的版本已經升級為 1.7.0 各種之前遇到的問題不復存在，安裝、下載速度都比 npm 要快很多，這裡對之前記錄做一下修改。
版本說明 （當前文件使用版本）
yarn : v0.17.10 yarn: v1.3.2 (修改日期 2017.12.26) node: v8.9.0 npm: v5.6.0
安裝
-
macOS 通過 homebrew 安裝
brew install yarn -
Windows 下載安裝 下載地址
-
檢視版本
yarn --version
1. 開始一個新工程
yarn init 與 npm init 一樣通過互動式會話建立一個 package.json
yarn init # yarn npm init # npm # 跳過會話，直接通過預設值生成 package.json yarn init --yes # 簡寫 -y npm init-y
2. 新增一個依賴
通過 yarn add 新增依賴會更新 package.json 以及 yarn.lock 檔案
yarn add <packageName> 依賴會記錄在 package.json 的 dependencies 下
yarn add [email protected] # yarn --save 是 yarn 預設的，預設記錄在 package.json 中 npm install [email protected]2.3.3 --save # npm
yarn add <packageName> --dev依賴會記錄在package.json的devDependencies下
yarn add webpack --dev # yarn 簡寫 -D
npm install webpack --save-dev # npm
yarn global add <packageName>全域性安裝依賴
yarn global add webpack # yarn
npm install webpack -g # npm
3. 更新一個依賴
yarn upgrade 用於更新包到基於規範範圍的最新版本
yarn upgrade # 升級所有依賴項，不記錄在 package.json 中 npm update # npm 可以通過 ‘--save|--save-dev’ 指定升級哪類依賴 yarn upgrade webpack # 升級指定包 npm update webpack --save-dev # npm yarn upgrade --latest # 忽略版本規則，升級到最新版本，並且更新 package.json
4. 移除一個依賴
yarn remove <packageName>
yarn remove webpack # yarn
npm uninstall webpack --save # npm 可以指定 --save | --save-dev
5. 安裝 package.json 中的所有檔案
yarn 或者 yarn install
yarn install # 或者 yarn 在 node_modules 目錄安裝 package.json 中列出的所有依賴 npm install # npm # yarn install 安裝時，如果 node_modules 中有相應的包則不會重新下載 --force 可以強制重新下載安裝 yarn install --force # 強制下載安裝 npm install --force # npm
6. 執行指令碼
yarn run 用來執行在 package.json 中 scripts 屬性下定義的指令碼
// package.json { "scripts": { "dev": "node app.js", "start": "node app.js" } }
yarn run dev # yarn 執行 dev 對應的指令碼 node app.js
npm run # npm
yarn start # yarn
npm start # npm
與 npm 一樣 可以有 yarn start 和 yarn test 兩個簡寫的執行指令碼方式
7. 顯示某個包資訊
yarn info <packageName> 可以用來檢視某個模組的最新版本資訊
yarn info webpack # yarn npm info webpack # npm yarn info webpack --json # 輸出 json 格式 npm info webpack --json # npm yarn info webpack readme # 輸出 README 部分 npm info webpack readme
8. 列出專案的所有依賴
yarn list
yarn list # 列出當前專案的依賴 npm list # npm yarn list --depth=0 # 限制依賴的深度 sudo yarn global list # 列出全域性安裝的模組
9. 管理 yarn 配置檔案
yarn config
yarn config set key value # 設定 npm config set key value yarn config get key # 讀取值 npm config get key yarn config delete key # 刪除 npm config delete key yarn config list # 顯示當前配置 npm config list yarn config set registry https://registry.npm.taobao.org # 設定淘寶映象 npm config set registry https://registry.npm.taobao.org # npm
10. 快取
yarn cache
sudo yarn cache list # 列出已快取的每個包
sudo yarn cache dir # 返回 全域性快取位置
sudo yarn cache clean # 清除快取
11. 問題
1. 安裝 package.json 中檔案的問題
正常安裝 sudo yarn add [email protected] package.json 中 出現
"dependencies": { "react": "15.4.2"
}
通過終端檢視安裝版本 yarn list
├─ [email protected] │ ├─ [email protected]^0.8.4 │ ├─ loose[email protected]^1.1.0 │ └─ object[email protected]^4.1.0
是正確的版本，但是，如果在 package.json 中加上如下依賴，然後通過 sudo yarn install 安裝
"dependencies": { "react": "15.4.2", "react-dom": "^15.4.2", "jquery": "^3.0.0" }
通過終端檢視安裝版本 yarn list
├─ [email protected] │ ├─ [email protected]^0.8.9 │ ├─ loose[email protected]^1.1.0 │ ├─ object[email protected]^4.1.0 │ └─ prop[email protected]~15.5.0 ├─ [email protected]15.4.2 │ ├─ [email protected]^0.8.4 │ ├─ loose[email protected]^1.1.0 │ └─ object[email protected]^4.1.0 ├─ [email protected]3.2.1
react 還是之前的版本，但是 新安裝的 react-dom 和 jquery 都變成了 最新版本
再試試將版本號的寫法變一下 去掉 ^
"dependencies": { "react": "15.4.2", "react-dom": "15.4.2", "jquery": "3.0.0" }
通過 sudo yarn install 安裝 檢視安裝版本 yarn list
├─ [email protected] │ ├─ [email protected]^0.8.1 │ ├─ loose[email protected]^1.1.0 │ └─ object[email protected]^4.1.0 ├─ [email protected]15.4.2 │ ├─ [email protected]^0.8.4 │ ├─ loose[email protected]^1.1.0 │ └─ object[email protected]^4.1.0 ├─ [email protected]3.0.0
安裝的是正確的版本了
說明
1: "react-dom": "^15.4.2"這種寫法,加了^，是一般是通過npm install --save安裝外掛生成版本號的預設格式，表示安裝15.x.x的最新版本，安裝時不改變大版本號 2: "react-dom": "15.4.2"這種寫法,只有版本號，是 yarn add安裝後生成版本號的預設格式，表示必須安裝同一個版本號 3: 版本號控制，有一個規範，就是語義化版本號控制，規定了版本號格式為：主版本號.次版本號.修訂號；
- 主版本號：當你做了不相容的 API 修改
- 次版本號：當你做了向下相容的功能性新增
- 修訂號：當你做了向下相容的問題修正
一般來講 只要主版本號正確，就可以相容，但是像 最新版的 [email protected] ,出現了React.createClass與React.PropTypes棄用的警告，控制檯一片紅，因為引用了第三方元件庫，最後選擇暫不升級react，類似的情況，個人感覺 yarn 預設的版本號寫法(只安裝特定版本的檔案)，更符合需求，npm 的話，很可能導致兩個擁有同樣package.json 的應用，安裝了不同版本的包，進而導致一些BUG
2. 在 yarn 或者 npm 中設定預設版本規則
npm set save-exact true 全域性設定 package.json 只記錄確切版本號 node: 1.1.1,
npm config set save-prefix '~' 設定安裝新模組時，package.json 記錄版本號的方式 ~ \ ^ 等
sudo yarn config set save-prefix '~' 通過 yarn 設定，要有 sudo 許可權
注意： 通過以上設定可以更改package.json 中記錄的版本號預設方式，但是 yarn 的設定是帶有 sudo 許可權的，通過 sudo add <packageName> 的模組才會按照設定的方式更新版本號
12. 總結
就像官網上說的，yarn 的安裝速度快，能並行化操作以最大化資源利用率；安全，Yarn會在每個安裝包被執行前校驗其完整性。正式版的 yarn 比較與 npm 更高效