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 檔案

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

    yarn add [email protected] # yarn  --save 是 yarn 預設的，預設記錄在 package.json 中
    npm install [email protected] --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 coinfig

    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. 通過 yarn run 等執行指令碼時，會報錯

更新版本後，這個問題不會再出現

yarn run run

yarn run v0.17.10
$ webpack-dev-server --progress --colors --config webpack.dev.config.js 
fs.js:640
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: EACCES: permission denied, open '/Users/zhangmingjia/Desktop/document/ceshi/temp/router4-test/node_modules/arr-flatten/index.js'

大概意思是沒有許可權，然後加上 sudo 又試了一下

sudo yarn run run

yarn run v0.17.10
$ webpack-dev-server --progress --colors --config webpack.dev.config.js 
 10% building modules 2/2 modules 0 active                                         
Project is running at http://10.15.32.78:8087/
webpack output is served from /Users/zhangmingjia/Desktop/document/ceshi/temp/router4-test/dev
Content not from webpack is served from /Users/zhangmingjia/Desktop/document/ceshi/temp/router4-test/dev
404s will fallback to /index.html
Hash: d374085597660a7a1085                                                              
Version: webpack 2.3.3
Time: 5083ms
              Asset      Size  Chunks                    Chunk Names
       js/vendor.js   1.31 MB       0  [emitted]  [big]  vendor
       js/bundle.js   44.5 kB       1  [emitted]         app
chunk-manifest.json  43 bytes          [emitted]         
     js/manifest.js   5.88 kB       2  [emitted]         manifest
   js/vendor.js.map   1.56 MB       0  [emitted]         vendor
   js/bundle.js.map   43.3 kB       1  [emitted]         app
 js/manifest.js.map    5.9 kB       2  [emitted]         manifest
         index.html   1.28 kB          [emitted]         
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  545 kB       0  
webpack: Compiled successfully.

看了別人的部落格，貌似沒有這個問題啊，而且設定的 webpack devServer.open = true, 可以開啟瀏覽器，但是不會跳轉到設定好的頁面（用 npm 時 沒有這個問題）

2. 安裝 package.json 中檔案的問題

正常安裝 sudo yarn add [email protected] package.json 中 出現

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

通過終端檢視安裝版本 yarn list

    ├─ [email protected]
    │  ├─ [email protected]^0.8.4
    │  ├─ [email protected]^1.1.0
    │  └─ [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
    │  ├─ [email protected]^1.1.0
    │  ├─ [email protected]^4.1.0
    │  └─ [email protected]~15.5.0
    ├─ [email protected]
    │  ├─ [email protected]^0.8.4
    │  ├─ [email protected]^1.1.0
    │  └─ [email protected]^4.1.0
    ├─ [email protected]

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
    │  ├─ [email protected]^1.1.0
    │  └─ [email protected]^4.1.0
    ├─ [email protected]
    │  ├─ [email protected]^0.8.4
    │  ├─ [email protected]^1.1.0
    │  └─ [email protected]^4.1.0
    ├─ [email protected]

安裝的是正確的版本了

說明

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

3. 在 yarn 或者 npm 中設定預設版本規則

1. npm set save-exact true 全域性設定 package.json 只記錄確切版本號 node: 1.1.1,
2. npm config set save-prefix '~' 設定安裝新模組時，package.json 記錄版本號的方式 ~ \ ^ 等
3. sudo yarn config set save-prefix '~' 通過 yarn 設定，要有 sudo 許可權

注意： 通過以上設定可以更改package.json 中記錄的版本號預設方式，但是 yarn 的設定是帶有 sudo 許可權的，通過 sudo add <packageName> 的模組才會按照設定的方式更新版本號

12. 總結

就像官網上說的，yarn 的安裝速度快，能並行化操作以最大化資源利用率；安全，Yarn會在每個安裝包被執行前校驗其完整性。正式版的 yarn 比較與 npm 更高效。