Yarn的工作流示例

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

1. yarn工作流案例示例

1.1 使用 yarn 初始化一個(gè)項(xiàng)目

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

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

yarn init

效果如圖

此時(shí)會(huì)提示你輸入一些問(wèn)題，方便初始化項(xiàng)目信息。如果無(wú)需特殊定制化一些信息，可以一路回車(chē)鍵，使用他的默認(rèn)信息。

初始化完成后，初始化的文件夾中，會(huì)自動(dòng)生成一個(gè) package.json 文件，文件中包含初始化時(shí)填寫(xiě)的默認(rèn)信息，如下圖：

package.json 用于管理包依賴(lài)關(guān)系。其他的如添加/刪除/更新等命令用于管理 package.json 和 yarn.lock。

1.2 添加一個(gè)依賴(lài)

使用 yarn add 命令，如添加vue-cli依賴(lài)：

yarn add vue-cli

如果不寫(xiě)版本號(hào)，默認(rèn)安裝最新版本，如果需要安裝指定版本，請(qǐng)按照如下格式添加依賴(lài)：

yarn add vue-cli@x.x.x

此操作將自動(dòng)在 package.json中添加對(duì)應(yīng)的依賴(lài)，同時(shí)更新yarn.lock文件的版本信息。

我們還可以添加依賴(lài)到其他類(lèi)型的依賴(lài)關(guān)系如：

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

具體的依賴(lài)關(guān)系類(lèi)型，yarn的官網(wǎng)列舉如下：

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

我們可以看到我們的package.json文件中多出了預(yù)想的依賴(lài)信息，并且項(xiàng)目目錄中多出了 node_modules 文件夾，所有的依賴(lài)相關(guān)文件都被安裝在了這個(gè)文件夾中，大功告成！

1.3 使用yarn更新依賴(lài)

上文中，我們學(xué)習(xí)了如何添加依賴(lài)，在這里，我們?cè)賹W(xué)習(xí)一下如何更新依賴(lài)。yarn 更新依賴(lài)使用的是 yarn upgrade [package] 命令，這個(gè)很簡(jiǎn)單也很好理解。但是也有一些需要注意得使用點(diǎn)，接下來(lái)給大家示范一下。
首先我們初始化一個(gè) webpack依賴(lài)，指定版本號(hào)為3.5.0

yarn add webpack@3.5.0

此時(shí)我們的 package.json 中修改為

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

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

yarn upgrade webpack

雖然控制臺(tái)沒(méi)有任何報(bào)錯(cuò)，也提示更新成功，但是我們的 package.json 中的配置還是

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

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

yarn upgrade webpack --latest

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

這樣就達(dá)到我們想升級(jí)依賴(lài)到最新版本的目的。

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

yarn upgrade-interactive

1.4 使用yarn刪除依賴(lài)

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

從當(dāng)前項(xiàng)目中刪除依賴(lài)項(xiàng)：

yarn remove lodash

一次從所有工作空間中刪除一個(gè)依賴(lài)項(xiàng)：

yarn remove lodash --all

刪除所有以開(kāi)頭的依賴(lài)項(xiàng)eslint-：

yarn remove 'eslint-*'

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

yarn remove '@babel/*'

刪除所有匹配的依賴(lài)項(xiàng)react-dom或react-helmet ：

yarn remove 'react-{dom,helmet}'

1.5 補(bǔ)充知識(shí)點(diǎn)

總所周知，我們使用 npm 時(shí)，因?yàn)樗俣群苈?，我們可以使用修改下載源的方式提升下載速度。同樣的，使用 yarn 如果有需要，我們同樣可以修改下載源(淘寶鏡像)。

1.5.1 臨時(shí)修改（只生效一次）:

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

1.5.2 設(shè)置yarn的配置項(xiàng)（全局配置）:

查看yarn源的當(dāng)前地址

yarn config get registry

設(shè)置淘寶鏡像

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

2. 小結(jié)

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