Yarn 的 workspace 和離線安裝策略

前言：大家好，很高興和大家又見面啦！在之前得幾個小節(jié)里，主要給大家介紹了關(guān)于 Yarn 得基礎(chǔ)知識，大家只要在平時得開發(fā)過程中，多多得嘗試使用，一定能很快得掌握。那本章開始，我將給大家講解一些關(guān)于 Yarn 得高級特性，有助于幫助大家理解，為什么 Yarn 這個依賴管理工具，在短時間就能廣泛的在前端架構(gòu)中被大家熱衷使用，并且發(fā)展成為足以媲美 npm 的主流管理工具。

1. 關(guān)于 Yarn 的 workspace

1.1 為什么要使用 workspace

在前面的章節(jié)中，給大家簡單提過這樣一個觀點，就是 yarn 的官方文檔教程中表示，Yarn 并不希望開發(fā)者像使用 npm 那樣，在不考慮內(nèi)存等相關(guān)因素的情況下，可以隨心所欲的全局安裝依賴然后去使用它。它更希望我們針對于每一個項目，單獨去維護我們的項目相關(guān)依賴。

基于這種使用思路，那么我們現(xiàn)在思考一個問題：單獨維護每個項目，這樣可以根據(jù)項目的 package.json 去維護每個項目的依賴，非常的清晰、方便。但是同時也暴露出了一些如重復(fù)安裝，占用存儲空間等缺點。所以，為了解決這些不足，Yarn 的 workspace 策略應(yīng)運而生。

1.2 workspace 能幫我們解決什么問題？

• 依賴關(guān)系可以鏈接在一起，這意味著你的工作區(qū)可以相互依賴，同時始終使用最新的可用代碼。這也是一個相對于 yarn link 更好的機制，因為它只影響你的工作空間樹，而不是整個系統(tǒng)
• 能幫助你更好地管理多個子項目的依賴庫，這樣你可以在每個子項目里使用獨立的 package.json 管理你的依賴，又不用分別進到每一個子項目里去 yarn install/upfrade 安裝/升級依賴，而是使用一條yarn命令去處理所有依賴。就像只有一個package.json一樣。
• yarn會根據(jù)就依賴關(guān)系幫助你分析所有子項目的共用依賴，保證所有的項目公用的依賴只會被下載和安裝一次。

這樣就能完美的解決了我們上文所分析的問題。那么接下來，我就帶領(lǐng)大家通過實際例子的方式，具體的使用一下 Yarn 的 workspace 吧！

1.3 如何使用 workspace

當我們需要構(gòu)建一個大型的前端項目，里面包含幾個并列的子項目時，我們就可以使用yarn得 workspace 。目前國內(nèi)得許多經(jīng)典開源項目，如 vue、react 等，都是用得這一思路去構(gòu)建他們得項目。

1.3.1 沒有使用workspace時，我們怎么做的

在不使用 workspace 時，我們的項目目錄通常是這樣的

projects/
| project1/
|  |--package.json
|  |--node_modules/
|  |  |--vue/
|--project2
|  |--package.json
|  |--node_modules/
|  |  |--vue/
|  |  |--project1/

其中第一個子項目 project1 的 package.json 配置可以簡化為：

{
  "name": "project1",
  "version": "1.0.0",
  "dependencies": {
    "vue": "1.0.0"
  }
}

第二個子項目 project2 的 package.json 配置可以簡化為：

{
  "name": "project2",
  "version": "1.0.0",
  "dependencies": {
    "vue": "1.0.0",
    "project1": "1.0.0"
  }
}

這種經(jīng)典的傳統(tǒng)使用方法，就會暴露出如上文所說的問題，總結(jié)本案例的不足點如下：

1. 兩個子項目有相同的依賴 vue ，每個子項目都會下載一次 vue 依賴，不僅浪費開發(fā)效率，還占用額外空間，當子項目較多時，問題更加明顯。
2. 第二個子項目 project2 依賴于第一個子項目 project2 ，而 project1 如果沒有發(fā)布到 npm 倉庫，那就得使用yarn link命令來配置依賴，非常不方便。
3. 需要使用 yarn build 構(gòu)建項目時，需要每個子項目分別構(gòu)建，不能統(tǒng)一構(gòu)建。

1.3.2 使用workspace示例

使用 workspace 不用安裝別的依賴，直接新建一個項目根目錄 projects， 初始化項目即可。然后修改初始化的 package.json 文件為：

{
  "private": true,
  "workspaces": ["project1", "project2"] // 也可以使用通配符設(shè)置為 ["project*"]，開源社區(qū)則都基本上使用 "workspaces": ["packages/*"] 的目錄結(jié)構(gòu)。
}

兩個子項目 project1 和 project2 如上文配置不變。

在根目錄 projects 目錄下執(zhí)行 yarn install

$ yarn install
yarn install v1.22.0
info No lockfile found.
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Saved lockfile.
?  Done in 0.56s.

此時查看目錄結(jié)構(gòu)如下：

projects/
|--package.json
|--project1/
|  |--package.json
|--project2
|  |--package.json
|--node_modules/
|  |--vue/
|  |--project1/ -> ./project1/

備注：

• 如果需要某個特殊的 子項目 不受 Yarn Workspace 管理，只需在此 workspace 目錄下添加 .yarnrc 文件，并添加如下內(nèi)容禁用即可

workspaces-experimental false

• 如果想單獨添加或者移除某個子項目的依賴，可以使用如下命令：

$ yarn workspace project1 add vue --dev
$ yarn workspace project1 remove vue 

以上便是 yarn 的 workspace 簡單用法。

2. 淺談Yarn的離線安裝策略

我們知道，yarn 這個依賴管理工具和其他的管理工具對比，一大特點就是快。根據(jù)以往經(jīng)驗來看，當我們使用 npm ，因為網(wǎng)速或者其他的，如需科學上網(wǎng)才能下載依賴等問題時，使用 yarn 代替 npm 去下載時，往往會有很好的效果。

那么，如果是更加極端的情況，比如我們當前沒有網(wǎng)絡(luò)的情況，想下載相關(guān)依賴，可以嗎？答案是可以，只要我們之前在有網(wǎng)絡(luò)時候在本地下載過這個依賴，那就可以按照如下方法去離線下載相關(guān)依賴。

1. 設(shè)置離線存儲目錄，使用下面命令會在當前項目路徑生成一個 yarn-offline 文件夾用來存放構(gòu)建的.tgz離線文件。

yarn config set yarn-offline-mirror ./yarn-offline

2. 離線文件夾不會同步你的包，可能會導(dǎo)致一些的問題，所以需要清除用不到的壓縮包。

yarn config set yarn-offline-mirror-pruning true

3. 刪除 node_modules 文件夾下面的 yarn.lock，生成離線文件。

yarn install

4. 模擬沒有網(wǎng)絡(luò)的環(huán)境，刪除上面安裝的 node_modules 文件，并執(zhí)行下面命令。

yarn --offline

以上便是使用 yarn 進行離線安裝依賴的方法。

3. 小結(jié)

Yarn 作為后起之秀，發(fā)展成現(xiàn)在深受廣大開發(fā)者喜愛的依賴管理工具，有很多 npm 等管理工具所不具備的特性和優(yōu)勢，本文就給大家講解了 yarn 的兩個高級用法：workspace 和離線緩存策略。希望大家在熟練掌握它的基礎(chǔ)用法的同時，也能深入理解 yarn 的高級用法與特性。