[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

安裝

1. macOS 通過 homebrew 安裝 brew install yarn

2. Windows 下載安裝 下載地址

3. 查看版本 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 webpack@2.3.3 # yarn  --save 是 yarn 默認的，默認記錄在 package.json 中
npm install webpack@2.3.3 --save # npm

1. yarn add <packageName> --dev 依賴會記錄在 package.json 的 devDependencies 下

    yarn add webpack --dev # yarn 簡寫 -D
    npm install webpack --save-dev # npm

1. 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 react@15.4.2 package.json 中 出現

"dependencies": {
        "react": "15.4.2"

 }

通過終端查看安裝版本 yarn list

  ├─ react@15.4.2
    │  ├─ fbjs@^0.8.4
    │  ├─ loose-envify@^1.1.0
    │  └─ object-assign@^4.1.0

是正確的版本，但是，如果在 package.json 中加上如下依賴，然后通過 sudo yarn install 安裝

 

 "dependencies": {
        "react": "15.4.2",
        "react-dom": "^15.4.2",
        "jquery": "^3.0.0"
    }

通過終端查看安裝版本 yarn list

├─ react-dom@15.5.3
    │  ├─ fbjs@^0.8.9
    │  ├─ loose-envify@^1.1.0
    │  ├─ object-assign@^4.1.0
    │  └─ prop-types@~15.5.0
    ├─ react@15.4.2
    │  ├─ fbjs@^0.8.4
    │  ├─ loose-envify@^1.1.0
    │  └─ object-assign@^4.1.0
    ├─ jquery@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

 ├─ react-dom@15.4.2
    │  ├─ fbjs@^0.8.1
    │  ├─ loose-envify@^1.1.0
    │  └─ object-assign@^4.1.0
    ├─ react@15.4.2
    │  ├─ fbjs@^0.8.4
    │  ├─ loose-envify@^1.1.0
    │  └─ object-assign@^4.1.0
    ├─ jquery@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 修改
• 次版本號：當你做了向下兼容的功能性新增
• 修訂號：當你做了向下兼容的問題修正

一般來講 只要主版本號正確，就可以兼容，但是像 最新版的 react@15.5.3 ,出現了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 更高效