1. 程式人生 > 其它 >yarn 基本安裝和使用

yarn 基本安裝和使用

前言

在 Node 生態系統中,依賴通常安裝在專案的 node_modules 資料夾中。然而,這個檔案的結構和實際依賴樹可能有所區別,因為重複的依賴可以合併到一起。

npm 客戶端把依賴安裝到 node_modules 目錄的過程具有不確定性。這意味著當依賴的安裝順序不同時,node_modules 目錄的結構可能會發生變化。這種差異可能會導致類似 “我的電腦上可以執行,別人的電腦上不行” 的情況,並且通常需要花費大量時間定為與解決
有時候就會遇到這種情況,完整可執行的專案上傳到git上,別人pull下來以後,npm install會報錯。

舉個例子:
npm 對包引入順序也十分的敏感,比如在一個空專案裡執行以下命令:

npm init -y
npm install globule@0.1.0 -S
npm install babel-generator@6.19.0 -S
npm install babel-helper-define-map@6.18.0 -S

我們這裡安裝了 3 個包都依賴於 lodash,不過 globule 依賴 [email protected],另外另個依賴 [email protected]
現在目錄依賴結構如下:


這是假設我們在專案裡使用 lodash,但是忘記重新安裝 lodash

var lodash = require('lodash')
console.log(lodash.VERSION) 
// v1.0.3

另一個同事獲取專案程式碼,執行 npm install,這時的目錄依賴結構裡面,第一層依賴的 lodash 變成了 4.x 版本,這樣就造成了依賴版本不一致的問題。而 yarn 則會保證無論怎樣引入的順序,目錄依賴結構都是一致的,確保不會發生這樣的 BUG。

一、yarn的簡介:

yarn依賴npm,是npm中的一個包
https://www.npmjs.com/package/yarn
yarn中文網站:https://yarn.bootcss.com/
Yarn是facebook釋出的一款比npm更完善的包管理工具 與 npm 相比,yarn 有著眾多的優勢
  1. 速度超快。
  2. Yarn 快取了每個下載過的包,所以再次使用時無需重複下載。 同時利用並行下載以最大化資源利用率,因此安裝速度更快。
  3. 超級安全。
  4. 在執行程式碼之前,Yarn 會通過演算法校驗每個安裝包的完整性。
  5. 超級可靠。
  6. 使用詳細、簡潔的鎖檔案格式和明確的安裝演算法,Yarn 能夠保證在不同系統上無差異的工作。

速度快
npm 會等一個包完全安裝完才跳到下一個包,但 yarn 會並行執行包,因此速度會快很多。

Yarn 會快取它下載的每個包,所以無需重複下載。它還能並行化操作以最大化資源利用率,安裝速度之快前所未有。

離線模式
之前安裝過的包會被儲存進快取目錄,以後安裝就直接從快取中複製過來,這樣做的本質還是會提高安裝下載的速度,避免不必要的網路請求。

可靠可確定性
保證各平臺依賴的一致性

網路優化
力求網路資源最大利用化,讓資源下載完美佇列執行,避免大量的無用請求,下載失敗會自動重新請求,避免整個安裝過程失敗

扁平化模式
對於不匹配的依賴版本的包創立一個獨立的包,避免建立重複的。
對於多個包依賴同一個子包的情況,yarn 會盡量提取為同一個包,防止出現多處副本,浪費空間。

版本控制
npm 用下來比較強的一個痛點就是:當包的依賴層次比較深時,版本控制不夠精確。會出現相同 package.json,但不同人的電腦上安裝出不同版本的依賴包,出現類似 “我的電腦上可以執行,別人的電腦上不行” 的 bug 很難查詢。你可以使用 npm-shrinkwrap 來實現版本固化,版本資訊會寫入 npm-shrinkwrap.json 檔案中,但它畢竟不是 npm 的標準配置。

而 yarn 天生就能實現版本固化。會生成一個類似 npm-shrinkwrap.json 的 yarn.lock 檔案,而檔案內會描述包自身的版本號,還會鎖定所有它依賴的包的版本號:

"@babel/[email protected]":
  version "7.0.0-beta.47"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.47.tgz#d18c2f4c4ba8d093a2bcfab5616593bfe2441a27"
  dependencies:
    "@babel/highlight" "7.0.0-beta.47"

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

其他關於 Yarn 的介紹
我們在使用 Yarn 時,依然要訪問 npm 倉庫,但 Yarn 能夠更快速地安裝軟體包和管理依賴關係,並且可以在跨機器或者無網路的安全環境中保持程式碼的一致性。

二、yarn的安裝

下載node.js,使用npm安裝

npm i -g -yarn

另外的安裝方式:

安裝node.js,下載yarn的安裝程式:
提供一個.msi檔案,在執行時將引導您在Windows上安裝Yarn
Yarn 淘寶源安裝,分別複製貼上以下程式碼行到黑視窗執行即可

yarn config set registry https://registry.npm.taobao.org -g 
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

測試是否安裝成功

yarn --vresion

安裝依賴 如vuecli

yarn global add @vue/cli

建立專案

前期準備工作node,npm,vue,yarn等環境要準備好

這裡完全可以使用 vue create demo 裡面選中yarn模式‘
vue init webpack myproject

啟動yarn dev

三、Yarn 換源

使用 Yarn 來安裝依賴時的體驗比 Npm 要好很多;但是偶爾也會存在 Yarn 源倉庫包下載不穩定的情況

// 檢視 yarn 配置
yarn config get registry
或者
yarn config list

> registry: 'https://registry.yarnpkg.com'

一、臨時修改

yarn add 軟體名 --registry https://registry.npm.taobao.org/

  

二、全域性修改,安裝淘寶映象

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

 

三、使用第三方軟體快速修改、切換 yarn 映象源
yrm (YARN registry manager) 不僅可以快速切換映象源,還可以測試自己網路訪問不同源的速度

# 安裝 yrm
npm install -g yrm

# 列出當前可用的所有映象源
yrm ls

// npm -----  https://registry.npmjs.org/
// cnpm ----  http://r.cnpmjs.org/
// taobao --  https://registry.npm.taobao.org/
// nj ------  https://registry.nodejitsu.com/
// rednpm -- http://registry.mirror.cqupt.edu.cn
// skimdb -- https://skimdb.npmjs.com/registry
// yarn ----  https://registry.yarnpkg.com

# 使用淘寶映象源
yrm use taobao

# 測試訪問速度
yrm test taobao

四、yarn的常用命令

安裝yarn 
npm install -g yarn
安裝成功後,檢視版本號: 
yarn --version
建立資料夾 yarn 
md yarn
進入yarn資料夾 
cd yarn
初始化專案 
yarn init // 同npm init,執行輸入資訊後,會生成package.json檔案
yarn的配置項: 
yarn config list // 顯示所有配置項
yarn config get <key> //顯示某配置項
yarn config delete <key> //刪除某配置項
yarn config set <key> <value> [-g|--global] //設定配置項
安裝包
yarn install //安裝package.json裡所有包,並將包及它的所有依賴項儲存進yarn.lock
yarn install --flat //安裝一個包的單一版本
yarn install --force //強制重新下載所有包
yarn install --production //只安裝dependencies裡的包
yarn install --no-lockfile //不讀取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock
新增包(會更新package.json和yarn.lock) yarn add [package] // 在當前的專案中新增一個依賴包,會自動更新到package.json和yarn.lock檔案中 yarn add [package]@[version] // 安裝指定版本,這裡指的是主要版本,如果需要精確到小版本,使用-E引數 yarn add [package]@[tag] // 安裝某個tag(比如beta,next或者latest) //不指定依賴型別預設安裝到dependencies裡,你也可以指定依賴型別: yarn add --dev/-D // 加到 devDependencies yarn add --peer/-P // 加到 peerDependencies yarn add --optional/-O // 加到 optionalDependencies //預設安裝包的主要版本里的最新版本,下面兩個命令可以指定版本: yarn add --exact/-E // 安裝包的精確版本。例如yarn add [email protected]會接受1.9.1版,但是yarn add [email protected] --exact只會接受1.2.3版 yarn add --tilde/-T // 安裝包的次要版本里的最新版。例如yarn add [email protected] --tilde會接受1.2.9,但不接受1.3.0
釋出包 yarn publish 移除一個包 yarn remove <packageName>:移除一個包,會自動更新package.json和yarn.lock
檢視包的快取列表
yarn cache list
全域性安裝包 == npm -g
yarn global
更新一個依賴 yarn upgrade 用於更新包到基於規範範圍的最新版本 執行指令碼 yarn run 用來執行在 package.json 中 scripts 屬性下定義的指令碼 顯示某個包的資訊 yarn info <packageName> 可以用來檢視某個模組的最新版本資訊 快取 yarn cache yarn cache list # 列出已快取的每個包 yarn cache dir # 返回 全域性快取位置 yarn cache clean # 清除快取

五、npm 與 yarn命令比較

npm install === yarn —— install安裝是預設行為

npm install taco --save === yarn add taco —— taco包立即被儲存到 package.json 中。

npm uninstall taco --save === yarn remove taco

npm install taco --save-dev === yarn add taco --dev

npm update --save === yarn upgrade

npm install taco@latest --save === yarn add taco

npm install taco --global === yarn global add taco —— 一如既往,請謹慎使用 global 標記。

注意:使用 yarn 或 yarn install 安裝全部依賴時是根據 package.json 裡的 dependencies 欄位來決定的

npm init === yarn init

npm init --yes/-y === yarn init --yes/-y

npm link === yarn link

npm outdated === yarn outdated

npm publish === yarn publish

npm run === yarn run

npm cache clean === yarn cache clean

npm login === yarn login

npm test === yarn test

Yarn 獨有的命令
yarn licenses ls —— 允許你檢查依賴的許可資訊
yarn licenses generate —— 自動建立依賴免責宣告 license
yarn why taco —— 檢查為什麼會安裝 taco,詳細列出依賴它的其他包
yarn why vuepress —— 檢查為什麼會安裝 vuepress,詳細列出依賴它的其他包

特性

Yarn 除了讓安裝過程變得更快與更可靠,還添加了一些額外的特性,從而進一步簡化依賴管理的工作流。

同時相容 npm 與 bower 工作流,並支援兩種軟體倉庫混合使用
可以限制已安裝模組的協議,並提供方法輸出協議資訊
提供一套穩定的共有 JS API,用於記錄構建工具的輸出資訊
可讀、最小化、美觀的 CLI 輸出資訊

參考連結:https://blog.csdn.net/csdn_yudong/article/details/82015885

宣告 歡迎轉載,但請保留文章原始出處:) 部落格園:https://www.cnblogs.com/chenxiaomeng/ 如出現轉載未宣告 將追究法律責任~謝謝合作