依賴管理工具 Yarn 簡介
大家好,今天我們開始一個新專題 — Yarn。了解前端開發的同學可能會習慣于使用 npm
或者
cnpm
作為我們項目的包管理工具,它們在給我們的日常開發帶來便利的同時,也伴隨著,如:安裝慢、無法保持包的一致性等讓開發者頭疼的問題,于是作為 Npm 的直接競爭對手 Yarn 誕生了,本文將從 Yarn 是什么,它有哪些優點,如何使用等方面向大家詳細介紹 Yarn。
1. Yarn 的前世今生
1.1 包管理工具的介紹
大家都知道 Yarn 是包管理工具,那么在學習 Yarn 之前,我們有必要討論一下,包管理工具是什么。
在近幾年之前得前端項目中,我們聰明得前端工程師們就已經開始使用如 jQuery
等經典的第三方 JS 工具庫,這大大得提高了我們前端項目得開發速度。 我們使用它的方法一般為,在 jQuery 官網上下載相關版本得 JS 靜態文件,然后放到我們自己的項目中,引用它封裝的相關方法去實現我們的需求,或者還有其他得一些如 CDN 引用等方式。
使用了一段時間之后,我們發現,這種開發方式,比之前我們純手寫或者復制粘貼代碼的效率快了一大截,但是也暴露出一些致命缺陷,如以下使用場景:
- 如果我們引用的 lib1.js,它同時依賴于lib2.js 和 lib3.js,那么我們在下載 lib1.js 的同時,也要將 lib2.js 和 lib3.js 一起下載,并且在文件里他們的引用順序也有講究,如果 3 個文件的順序不對,也會出現一些莫名其妙的問題。
- 第三方 JS 工具庫的作者可能會增加、優化一些代碼邏輯,或者只是修改一些其他開發者提出的 Bug,然后他們會把最新代碼包發布到自己的官網。而作為開發者的我們,就要經常關注這些項目里使用的第三方庫的動態,如果升級就要重復之前的操作,將文件重新手動下載下來,替換項目中之前的文件。
- 工具的版本問題,我們想升級項目中的依賴工具,就要去尋找資源,手動下載,手動替換。
在這些問題被發現之后,一批富有開拓精神的程序員們提出了他們新的想法和思路,于是 npm
的出現,徹底的終結了以上這些問題。
1.2 Npm 的橫空出世
作為各種包管理工具中最早出現的開拓者,Npm 是 Node.js 官方提供的,他的出現同時也制定了一些列的包管理規范,如:
- 將所有第三方依賴包放在
node_modules
這個文件目錄下,我們在增加,刪除,升級依賴也只是更新這個文件下的相關依賴包。 - 增加
package.json
文件,這個文件中存放本項目及項目的依賴和版本信息,這樣我們就可以一目了然的了解本項目用到了什么,都是什么版本的,不用多處尋找。 - 在使用依賴時,Node 提供的支持是內置的 require 方法,默認會到這個目錄下去檢索模塊,無需手動指定路徑。
如此一來,有了 Npm 的加持,JavaScript 從一門不被看好得弱類型語言,發展到了現在可以勝任大型前端項目開發,實現模塊化,工程化的前端項目搭建,穩定了前后端分離的發展思路。
Npm 已經奠定了前端工程基礎,但是追求完美的前端程序員們又基于 Npm 不足的地方,提供了新的完善思路,針對如 Npm 安裝包的速度問題,包的版本問題加以改善。所以今天我們要學習的 Yarn
就是用來解決這些問題的。
2. Yarn 的介紹
關于 Yarn 官網中有如下介紹:
Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry. —官網
簡單翻譯成中文就是,yarn作為項目的包管理工具,快速、安全、可靠。你下載的包將不再重新下載。而且確保在不同系統中可以正常工作。
這里我們看到Yarn
官方推薦的三個特點:
- 速度快:
Yarn
緩存了每個下載過的包,再次使用時無需重復下載。同時它是并行的,因此安裝速度更快- 安全: 在執行代碼之前,
Yarn
會通過算法校驗每個安裝包的完整性。- 可靠: 使用詳細、簡潔的鎖文件格式和明確的安裝算法,使
Yarn
能夠在不同系統上保證無差異的工作。
通過上面的介紹,我們可以總結出:Yarn
是基于 Npm 的不足之處做出了全新的改版升級,但是我們并不能說 Yarn 的出現會完全取代 Npm,因為目前的 Yarn ,只是完善升級了 Npm,讓開發者們有了更好的體驗,但截至目前為止,Yarn 并沒有實現全部的 Npm 命令及功能。
3. 使用 Npm 的缺點(競品對比)
- 感受過上文 yarn 安裝依賴的速度,對比 Npm,就會感覺等待 Npm 安裝進度條是一個很漫長的過程,尤其是在網速不好的情況下,當然大家也可以使用 Npm 在國內的淘寶鏡像服務 cnpm,這樣速度雖然提升了,但是安裝之后運行時的各種問題,也是開發者一直所詬病的,所以在速度上,yarn 碾壓 npm
- 關于錯誤提示,yarn 做的更加人性化,使用 npm 時,如果安裝某一個依賴發生錯誤,npm 會繼續打印之后的安裝日志,這樣依賴很多的大型項目,開發者很難注意到到底哪里安裝報錯
- 在 npm5 之前,npm 安裝無法保證版本的一致性,如:“1.0.3”、“~1.0.3”、"^1.0.3"這三個命令分別代表著:安裝指定的 1.0.3 版本、安裝 1.0.X 中最新的版本、
安裝 1.X.X 中最新的版本,這樣雖然更詳細,但也給學習中的開發者增加極大的學習成本。
yarn 為了解決以上的問題,增加了 yarn.lock 鎖文件,這個方案讓開發者不必再擔心項目中其他成員安裝的依賴版本不同,保證了在不同環境下項目都能完美運行。并且 yarn 的安裝日志顯然比 npm 更簡潔且易于閱讀。
4. Yarn 和 npm 能否同時使用?
可以的,上文提到,yarn 是對 npm 進行了安裝和提升,實現了 npm大 部分的命令和功能,且二者都遵循 package.json
文件,所以我們也不用擔心兼容問題,yarn 完全沒有侵入性。我本人在實際運用場景中,也經常使用 yarn 在安裝或刪除依賴文件,使用 npm 運行項目中定義的如:啟動命令,打包命令等,所以二者完全可以同時使用。
5. 在項目中如何安裝及使用 Yarn
5.1 安裝
yarn 有很多種安裝方式,對于不同的系統,我們可以區別安裝,在這里我推薦大家使用 Npm 去安裝,這種方法最方便簡潔。
npm i -g yarn
5.2 關于使用
在一個新項目中,我們通常按照以下步驟去使用 yarn:
- 寫入生成
package.json
,確定項目中需要哪些依賴(如果已有該文件跳過本步驟)。 - 執行
yarn
初始化項目依賴,生成 yarn.lock 文件。 - 通過
yarn add
命令添加需要安裝的依賴。 - 確定想升級某個依賴的最新版本時,使用
yarn upgrad
命令升級。
以上是簡單介紹關于 yarn 得使用方法,因為在之后得相關小節里,有針對于 yarn 使用方法和常用命令的詳細講解,在這里就不再贅述了。希望大家持續關注之后的章節,更加深入的學習關于 yarn 的知識和技能。
6. 學習與總結
yarn 的學習成本非常低,它本身就是為了簡化 npm 的命令,提高安裝依賴的速度和效率而誕生的工具,希望同學們可以認真學習,并且在項目中多多實踐。
7. 關于前置基礎及技能
我們知道,yarn 是跟 npm 很相似的前端依賴管理工具,不過他比 npm 更加方便高效,也更加簡單。所以為了方便理解 Yarn 的使用及原理,可以先了解 npm 的用法,當然如果想直接學習 yarn ,相信大家只要認真努力,也一樣可以學得會。加油!