npm,pnpm,yarn,npx的那些事兒
包管理器歷史
最早釋出的包管理器是 npm,他在 2010 年 1 月就已經發布了。它確立了包管理器工作的核心原則。
npm 的釋出誕生了一場革命,在此之前,專案依賴項都是手動下載和管理的。npm 引入了檔案和元資料欄位,將依賴項列表儲存在 package.json 檔案中,並且將下載的檔案儲存到 node_modules 資料夾中。
隨著 node 的發展,node 的包越來越多,人們在專案中新增的依賴越來越多,如何更快地下載,如何安全地下載被人們開始重視起來,於是在 2016年,Facebook 等公司開發了新的包管理器,就是我們現在經常使用的 yarn。
yarn 的結構設計參考了 npm,這導致 yarn 的初期版本主要通過並行化來解決安裝加速的問題。
當然 yarn 也提出了一些新概念,比如離線快取,檔案鎖定,快取感知等。
當 yarn 出現以後,越來越多的人意識到 npm 的缺點,於是有人在 yarn 之後, 又發明了一個新的 npm 版本,它被定義為 pnpm。
pnpm 和 npm, yarn的管理策略不同,它通過引入內容可定址儲存來提升效能。通過生成巢狀的 node_modules 資料夾,每個版本的依賴項僅僅物理儲存一次,節省了大量磁碟空間。通過符號連結,實現了檔案的依賴管理。
在 pnpm 之後, yarn 感受到了對手的挑戰,於是在 2020 年, yarn 2誕生了,這是一個全新的包管理器,可以說它和之前的 yarn 改動非常大,它通過了 PnP 的方法進行依賴的管理,通過依賴查詢表進行包的管理,同時,每個包通過zip的方式進行儲存,大大節省了磁碟空間。
npm
npm 通過 install 來安裝包,然後會在當前目錄生成一個 package.json 檔案 和 node_modules 資料夾,package.json 檔案儲存了報的版本,node_modules 資料夾儲存了完整的包檔案。
yarn
yarn 通過 add 來安裝包,同樣地,它也會在當前目錄總生成一個package.json 檔案 和 node_modules 資料夾,不同的是,它會有自己的鎖定檔案 yarn.lock, 此外它還會生成.yarn/cache/ 快取資料夾。
pnpm
pnpm 專案的初始狀態看起來就像一個 npm 專案一樣,也是有 package.json 檔案 和 node_modules 資料夾,不同的是在 node_modules 資料夾中, 它有自己的資料夾目錄 .pnpm,在這個目錄中,它會用平鋪的方式來儲存各個包,然後以依賴名和版本號的名字命名,實現了版本的複用。而且它不是通過拷貝機器快取中的依賴到專案目錄下,而是通過硬連結的方式,這能減少空間佔用。
npx
npx想要解決的主要問題,就是呼叫專案內部安裝的模組。比如專案內部安裝了測試工具webpack,我們要使用的話需要通過node-modules/.bin/webpack -v這樣來使用,但是有了npx,我們可以直接npx webpack -v就能使用。此外,對於一些全域性命令,如果不存在,它會自動下載安裝到一個臨時目錄,然後使用,不會汙染全域性空間。
結論
包管理器的當前狀態非常好。我們幾乎在所有主要的包管理器中實現了功能平等。但是,它們在引擎蓋下確實存在很大差異。
pnpm 起初看起來像 npm,因為它們的 CLI 用法相似,但管理依賴項卻大不相同;pnpm 的方法帶來更好的效能和最佳的磁碟空間效率。Yarn Classic 仍然很受歡迎,但它被認為是遺留軟體,並且在不久的將來可能會放棄支援。Yarn Berry PnP 是新貴,但尚未看到它徹底改變包管理器領域的潛力。
- Spring中實現非同步呼叫的方式有哪些?
- 帶引數的全型別 Python 裝飾器
- 整理了幾個Python正則表示式,拿走就能用!
- SOLID:開閉原則Go程式碼實戰
- React中如何引入CSS呢
- 一個新視角:前端框架們都卷錯方向了?
- 編碼中的Adapter,不僅是一種設計模式,更是一種架構理念與解決方案
- 手寫程式語言-遞迴函式是如何實現的?
- 一文搞懂模糊匹配:定義、過程與技術
- 新來個阿里 P7,僅花 2 小時,做出一個多執行緒永動任務,看完直接跪了
- Puzzlescript,一種開發H5益智遊戲的引擎
- @Autowired和@Resource到底什麼區別,你明白了嗎?
- CSS transition 小技巧!如何保留 hover 的狀態?
- React如此受歡迎離不開這4個主要原則
- LeCun再炮轟Marcus: 他是心理學家,不是搞AI的
- Java保證執行緒安全的方式有哪些?
- 19個殺手級 JavaScript 單行程式碼,讓你看起來像專業人士
- Python 的"self"引數是什麼?
- 別整一坨 CSS 程式碼了,試試這幾個實用函式
- 再有人問你什麼是MVCC,就把這篇文章發給他!