Yarn 構建工具入門基礎

一、yarn的背景和介紹

一直以來,我們在安裝和管理依賴的時候基本上都會使用npm,npm是一個非常優秀全面且廣受歡迎的包管理工具,它奠定了前端模塊化開發的基石,為前端的發展做出了不可磨滅的貢獻。

yarn就是一個類似于npm的包管理工具,它是由facebook推出并開源。鑒于facebook在前端界的影響力,yarn一面世就很受矚目,受到了前端界的廣泛歡迎。

與npm相比,yarn有著眾多的優勢,主要的優勢在于:速度快,離線模式,版本控制。

1、速度快。

npm會等一個包完全安裝完才跳到下一個包,但yarn會并行執行包,因此速度會快很多。網上有不少比較npm和yarn安裝同樣多依賴的執行速度,yarn在速度方面優勢明顯。實際項目中體驗一下真是飛一樣的速度,誰有試過誰知道~

2、離線模式,

離線的原理比較簡單,安裝過的包會被保存進緩存目錄,以后安裝就直接從緩存中復制過來,這樣做的本質還是會提高安裝下載的速度,避免不必要的網絡請求。

3、版本控制

npm用下來比較強的一個痛點就是:當包 的依賴層次比較深時,版本控制不夠精確。會出現相同package.json,但不同人的電腦上安裝出不同版本的依賴包,出現類似 “我電腦上是好的,沒問題呀”的bug很難查找。你可以使用npm-shrinkwrap來實現版本固化,版本信息會寫入npm-shrinkwrap.json文件中,但它畢竟不是npm的標準配置。
而yarn天生就能實現版本固化。會生成一個類似npm-shrinkwrap.json的yarn.lock文件,文件內會描述包自身的版本號,還會鎖定所有它依賴的包的版本號:


yarn.lock存儲這你的每個包的確切依賴版本,能確保從本地開發到生產環境,所有機器上都有精確相同的依賴版本。



二、yarn的安裝、用法和基本工作流

1、安裝(以mac為例)

Homebrew

你可以通過 Homebrew 包管理工具安裝 Yarn。 如果你還未安裝 Node.js,Homebrew 會自動為你安裝。

brew update
brew install yarn

設置路徑

你需要設置你終端的 PATH 環境變量,以便全局訪問 Yarn 的可執行文件。
添加`export PATH="$PATH:`yarn global bin`"`到你的 profile 文件(也可能是 .profile.bashrc.zshrc 等文件)。


2、用法

初始化一個新的項目

yarn init 

添加一個依賴包

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

更新一個依賴包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

刪除一個依賴包

yarn remove [package]

安裝所有的依賴包

yarn

or

yarn install


3、工作流

對于依賴管理來說,在項目中使用一個新的包管理器就是使用了一個新的工作流。 Yarn 將盡其最大的努力不侵入你的工作方式,并且使其工作流中的每一步都能簡單易懂。

您需要知道一些基本的工作流的知識:

創建一個新的項目
添加/更新/刪除依賴包
安裝/重新安裝依賴包
使用版本管理工具(例如 git)
持續集成

(1)、創建一個新項目

不論是已經有了現成的代碼倉庫(目錄),還是正著手啟動一個全新項目,你都可以使用同樣的方法引入Yarn。
在命令行終端里,跳轉到準備引入Yarn的目錄(通常是一個項目的根目錄),執行以下命令:

yarn init

這將打開一個用于創建Yarn項目的交互式表單,其中包含以下問題:

name (your-project):
version (1.0.0):
description:
entry point (index.js):
git repository:
author:
license (MIT):

你既可以回答這些問題,也可以直接敲回車鍵(enter/return)使用默認配置或者留空。

現在應該創建了一個和下面文件內容類似的 package.json

{
  "name": "my-new-project",
  "version": "1.0.0",
  "description": "My New Project description.",
  "main": "index.js",
  "repository": {
    "url": "https://example.com/your-username/my-new-project",
    "type": "git"
  },
  "author": "Your Name <you@example.com>",
  "license": "MIT"
}

執行yarn init之后,除了以上文件被創建之外,沒有任何副作用。你可以隨意編輯此文件。
package.json文件里存儲了項目的有關信息。 包括項目名稱、維護者信息、代碼托管地址,以及最重要的:項目依賴。

(2)、管理依賴項

你需要了解幾若干個用于增加、更新、刪除依賴項的命令。
每個命令都會更新package.jsonyarn.lock 文件。

在使用一個包之前,你需要執行以下命令將其加入依賴項列表:

yarn add [package]

[package]會被加入到package.json文件中的依賴列表,同時yarn.lock也會被更新。

  {
    "name": "my-package",
    "dependencies": {
+     "package-1": "^1.0.0"
    }
  }

你可以用以下參數添加其它類型的依賴:

  • yarn add --dev 添加到 devDependencies
  • yarn add --peer 添加到 peerDependencies
  • yarn add --optional 添加到 optionalDependencies
    通過指定依賴版本標簽,你可以安裝一個特定版本的包:
yarn add [package]@[version]
yarn add [package]@[tag]

[version][tag] 會被添加到 package.json,并在安裝依賴時被解析。
例如:

yarn add package-1@1.2.3
yarn add package-2@^1.0.0
yarn add package-3@beta
{
  "dependencies": {
    "package-1": "1.2.3",
    "package-2": "^1.0.0",
    "package-3": "beta"
  }
}



更新依賴包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

這會更新package.jsonyarn.lock 文件。

  {
    "name": "my-package",
    "dependencies": {
-     "package-1": "^1.0.0"
+     "package-1": "^2.0.0"
    }
  }

刪除依賴包

yarn remove [package]

這會更新package.jsonyarn.lock 文件。


(3)、安裝依賴項

如果剛從版本控制系統里 checkout 一個包,則需要為其安裝依賴。

如果是為現有的包增加依賴,那么這些新的依賴會自動安裝。

yarn install 是用于安裝一個項目的所有依賴。 Yarn會從package.json中讀取依賴,并將依賴信息存儲到yarn.lock中。

如果你正在開發一個包,通常你會在以下情況之后進行依賴安裝:

  1. 你剛檢出需要這些依賴項的項目代碼。
  2. 項目的另一個開發者添加了新的依賴,你需要用到。

安裝選項
有很多參數可以控制依賴安裝的過程,包括:

  1. 安裝所有依賴:yarnyarn install
  2. 安裝一個包的單一版本:yarn install --flat
  3. 強制重新下載所有包:yarn install --force
  4. 只安裝生產環境依賴:yarn install --production

您可以傳遞給 yarn install完整參數列表

(4)、配合版本控制

為了使其他人能夠使用你的包,或者能夠對其進行后續開發,你需要確保將所有必須的文件提交到你所使用的版本控制系統。

為了別人能使用你的包,以下文件必須被提交進版本控制系統:

  • package.json:包含包的所有依賴信息;
  • yarn.lock:記錄每一個依賴項的確切版本信息;
  • 包實現功能的實際項目代碼。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Yarn 初始化一個項目 yarn init 相當 npm init yarn add添加一個包 相當 ...
    FConfidence閱讀 28,851評論 5 19
  • 這篇文章已經被 Adrian Sandu, Marcello La Rocca, Matt Burnett, Nu...
    lucy_閱讀 9,089評論 4 16
  • 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 PS:轉載請注明出處作者:TigerChain地址:http...
    TigerChain閱讀 21,380評論 3 13
  • 官方文檔yarn upgrade 升級依賴 如果提示有新版本,但是當前版本不是最新的,運行yarn 就會自動安裝更...
    沒聽說過的花名閱讀 3,277評論 0 2
  • ----效果篇 效果:一般采取事實、公眾常識、證據、邏輯,判斷一個動作是否有效,不是我以為的,避免陷入自我思維瓶頸...
    風信子up閱讀 596評論 0 0