Yarn的工作流示例

前言：大家好，很高興和大家又見面啦！在之前得幾個小節(jié)里，主要給大家介紹了 Yarn 得基礎知識和相關概念。學習 一門技能只了解基礎概念和用法，不去親自動手嘗試是不行的。那么接下來，我會帶大家以一個實際的案例，來講解 yarn 的工作流，以及日常工作中，到底如何去使用 yarn 這個工具。

1. yarn工作流案例示例

1.1 使用 yarn 初始化一個項目

在這里默認大家已經(jīng)安裝好了yarn，如果沒有安裝的話，前文有講過，可以使用多種方式，最簡單的方法可以使用npm去安裝。

首先第一步，執(zhí)行下面命令，初始化一個項目：

yarn init

效果如圖

此時會提示你輸入一些問題，方便初始化項目信息。如果無需特殊定制化一些信息，可以一路回車鍵，使用他的默認信息。

初始化完成后，初始化的文件夾中，會自動生成一個 package.json 文件，文件中包含初始化時填寫的默認信息，如下圖：

package.json 用于管理包依賴關系。其他的如添加/刪除/更新等命令用于管理 package.json 和 yarn.lock。

1.2 添加一個依賴

使用 yarn add 命令，如添加vue-cli依賴：

yarn add vue-cli

如果不寫版本號，默認安裝最新版本，如果需要安裝指定版本，請按照如下格式添加依賴：

yarn add vue-cli@x.x.x

此操作將自動在 package.json中添加對應的依賴，同時更新yarn.lock文件的版本信息。

我們還可以添加依賴到其他類型的依賴關系如：

yarn add --dev 添加到 devDependencies
yarn add --peer 添加到 peerDependencies
yarn add --optional 添加到 optionalDependencies

具體的依賴關系類型，yarn的官網(wǎng)列舉如下：

最后，我們執(zhí)行 yarn add vue-cli，出現(xiàn) success信息，并提示我們具體安包的數(shù)量，說明依賴安裝成功 效果如圖：

我們可以看到我們的package.json文件中多出了預想的依賴信息，并且項目目錄中多出了 node_modules 文件夾，所有的依賴相關文件都被安裝在了這個文件夾中，大功告成！

1.3 使用yarn更新依賴

上文中，我們學習了如何添加依賴，在這里，我們再學習一下如何更新依賴。yarn 更新依賴使用的是 yarn upgrade [package] 命令，這個很簡單也很好理解。但是也有一些需要注意得使用點，接下來給大家示范一下。
首先我們初始化一個 webpack依賴，指定版本號為3.5.0

yarn add webpack@3.5.0

此時我們的 package.json 中修改為

"dependencies": {
    "webpack": "3.5.0"
  }

然后我們按照正常的思路，使用 yarn 命令嘗試去更新 webpack 依賴

yarn upgrade webpack

雖然控制臺沒有任何報錯，也提示更新成功，但是我們的 package.json 中的配置還是

"dependencies": {
    "webpack": "3.5.0"
  }

這就是我要說明的注意點：yarn upgrade 是按你指定的版本區(qū)間升級的，你可以使用 --latest 參數(shù)升級到最新版，無視 package.json 中的版本區(qū)間。

yarn upgrade webpack --latest

"dependencies": {
    "webpack": "4.43.0"
  }

這樣就達到我們想升級依賴到最新版本的目的。

現(xiàn)在示例的是一個依賴，如果有多個依賴，想同時升級到最新版本，需要執(zhí)行如下命令：

yarn upgrade-interactive

1.4 使用yarn刪除依賴

使用yarn刪除依賴的命令為 yarn remove ，此命令有幾個小技巧，給大家介紹一下。

從當前項目中刪除依賴項：

yarn remove lodash

一次從所有工作空間中刪除一個依賴項：

yarn remove lodash --all

刪除所有以開頭的依賴項eslint-：

yarn remove 'eslint-*'

刪除@babel范圍內(nèi)的所有依賴項：

yarn remove '@babel/*'

刪除所有匹配的依賴項react-dom或react-helmet ：

yarn remove 'react-{dom,helmet}'

1.5 補充知識點

總所周知，我們使用 npm 時，因為速度很慢，我們可以使用修改下載源的方式提升下載速度。同樣的，使用 yarn 如果有需要，我們同樣可以修改下載源(淘寶鏡像)。

1.5.1 臨時修改（只生效一次）:

yarn save [package] --registry https://registry.npm.taobao.org/

1.5.2 設置yarn的配置項（全局配置）:

查看yarn源的當前地址

yarn config get registry

設置淘寶鏡像

yarn config set registry https://registry.npm.taobao.org/

2. 小結

俗話說：紙上得來終覺淺，絕知此事要躬行。也就是說學習一門技能，不僅要了解它的基礎知識和構建原理，最重要的環(huán)節(jié)是親自去實踐。結合以往的經(jīng)驗，很多時候，在沒親自動手之前，我們覺得自己已經(jīng)掌握了某個知識點，實際上親自操作一下，就會遇到各種坑。其實這些也不是坑，就是對某些具體細節(jié)的知識點不夠了解。只有總結了前人的經(jīng)驗，加上自己實際實踐出來的感悟，才能說真的學會了這個技能。所以希望大家可以親自動手，親自總結，多多實踐！