搜尋
首頁web前端js教程npm的模組安裝機制詳細介紹

npm的模組安裝機制詳細介紹

Jun 26, 2017 am 10:54 AM
安裝機制模組詳解

 
依賴樹表面的邏輯結構與依賴樹真實的物理結構
依賴樹表面的邏輯結構與依賴樹真實的物理結構不一定相同!
這裡要先提到兩個指令:tree -d(linux)和npm ls(npm)
在一個npm專案下:
tree -d指令以樹狀圖的方式列出一個項目下所有依賴的物理結構
#npm ls指令以樹狀圖的方式列出一個項目下所有依賴的邏輯結構
 
以官方文件為範例:
專案example1有兩個依賴模組:mod-a模組和mod-c模組;
mod-a模組有一個依賴模組mod-b@1.0.0模組
#mod-c模組有一個依賴模組mod-b@2.0.0模組
tree -d 和npm ls運行結果如下:(注意npm版本為npm3而非npm2)
 
 
#先看看下面那個紅框的結果,這應該是「最符合我們理解」的依賴樹,首先項目下形成了一級依賴-mod-a模組和mod-b模組,然後以這兩個模組為父模組再追加二級依賴模組mod-b@1.0 .0和mod-b@2.0.0
 
但是! 這並不是物理上真實形成的依賴樹的模樣,物理上真實形成的依賴樹是上面的那個紅色框。 mod-a,mod-c和mod-b竟然同為同一級的依賴。
 
你可能會問,為什麼會形成這樣的依賴樹呢? 下面我就來解釋一番
 
#【注意】:下面的圖示全部為依賴樹的物理結構,而不是邏輯結構
 
#關於npm模組安裝機制的一點猜想
安裝模組時,可能的方式有兩種:平級式的安裝或嵌套式的安裝(這裡只是猜想和假設)

 

#能不能完全採取平階的安裝方式呢? ——不能
 
我們取和上面相似的一個例子:專案APP下有兩個依賴模組A和B;A又有一個依賴模組Cv1.0;而B也有一個依賴模組Cv2.0。顯然,它們並不能同時存在於同一個node_modules下,當安裝的時候,由於npm的作用機制,只能有一個版本的依賴模組被安裝,其中一個將覆蓋另外一個。

 

但如果我們只安裝一個版本的C依賴模組,將可能會導致A模組和B模組不相容
 
基於上述原因,npm2選擇了嵌套的安裝方式-
 
#npm2下的模組安裝機制
npm2安裝多層次的依賴模組採用巢狀的安裝方式: 
##  
優點與缺點
優點:
解決了版本單一時存在的存在的不相容問題,實現多版本相容
#弊端:可能造成相同模組大量冗餘
的問題,如下:
 
以上面例子為例,下面這種情況也是合理存在的:
#憑感覺也知道,這絕不是什麼好現象,那我們如何在實現依賴間多版本相容的前提下,減少這種模組冗餘呢?於是npm3做了改進 
#npm3下的模組安裝機制:
npm3和npm2的不同主要體現在二級模組的安裝上:#npm3會"盡量"##把邏輯上某個層級的模組在物理結構上"全部"放在專案的第一層級裡,具體我概括為以下三種情況:
1.在安裝某個二級模組時,若發現第##等級還沒有相同名稱的模組,便
把這第二層級的模組放在第一層級
2.在安裝某個二級模組時,若發現第層級有相同名稱,相同版本的模組,便
直接重複使用那個模組###############3.在安裝某個二級模組時,若發現第######一#####層級### ###有相同名稱,但版本不同的模組######,便###只能嵌套在自身的父模組下方#########
 
這開始可能有些難理解,所以讓我們看圖片說話吧!
 
#先說1:安裝某個二級模組時,若發現第一層級還沒有相同名稱的模組,便把這第二層級的模組放在第一層級
我們先簡化一下上面的範例:現在專案APP下只有一個一級依賴模組A,它下面有一個二級依賴模組C,但npm install的時候,項目下安裝依賴的

 

npm3中的二級模組(C v1.0),在專案的一級目錄(node_modules)下沒有相同名稱的模組時,會被安裝到一級目錄下,從而跟它的父模組A同級。 這就是本文一開始依賴樹的邏輯結構和物理結構不同的起因
 
也就是說:
在npm2中,依賴樹的邏輯結構和它的物理結構相同
#在npm3中,依賴樹的邏輯結構和它的物理結構可能不同
 
#再說2:在安裝某個二級模組時,若發現第一層級有相同名稱,相同版本的模組,便直接重複使用那個模組
在1的基礎上,我們把1的例子還原回之前的複雜一些的場景::專案APP下有兩個依賴模組A和B;A又有一個依賴模組Cv1.0;而B也有一個依賴模組C v1.0(兩個C模組版本相同)

 

#對npm2,兩個C套件是相同的,造成模組冗餘
在npm3中,因為A模組下的C模組被安裝到了第一級,這使得B模組能夠復用處在同一級下;且名稱,版本,均相同的C模組
npm3就是用這種方式,部分地解決了npm2的痛點(部分)
 
【從1,2到3的過渡】我在這一小節的開始說:「npm3會」盡量」把邏輯上某個層級的模組"全部"放在專案的第一層級」,我想你看完1,2後應該多少有些理解了「盡量」的含義了,但我說了「盡量」,也意味著npm3存在著不能把二級依賴放在第一層級的情況。對此,請看3:
 
#最後說3:在安裝某個二級模組時,若發現第一層層級有相同名稱,但版本不同的模組,只能嵌套在自身的父模組下方
在2中,A,B所依賴的兩個C模組是相同的,但如果兩個C模組的版本不同呢? ,項目npm install情況如下:

 

在npm3中,因為B和A所要求的依賴模組不同,(B下要求是v1.0的C,A下要求是v2.0的C )所以B不能像2中那樣複用A下的C v1.0模組
(看到這裡我想應該能解答你對文章開頭那個例子的疑惑了吧,這個例子和那個例子是幾乎完全一樣的哦)
看到這裡,你對npm2和npm3下的模組工作機制,以及npm3針對npm2的優化有個大體的了解了吧,但請思考一個問題:npm3是否已經把npm2的模組冗餘的缺陷優化到極致了呢? ———答案是沒有,請往下看:
 
##實際上:npm3中仍然可能出現模組冗餘的情況,因為一級目錄下已經有v1.0的C模組了,所以所有的v2.0只能作為二級依賴模組被安裝
,這樣你就會看到如下的情況

## 
 
並且在上圖所示的這種特殊情況裡,npm3和npm2表現得似乎並沒什麼區別
【過渡】那麼這有沒有解決的方式呢?當然是有的,當A模組下的C v1.0模組被更新到C v2.0的前提下,我們可以透過npm dedupe把所有C v2.0的二級依賴模組「重定向」到一級目錄下的那個C v1.0
 
#利用npm dedupe去除冗餘模組:
#npm dedupe做了什麼? 它能夠把凡是能夠去除的冗餘的二級依賴模組,「重定向」到名稱/版本相同的一級模組

 
參考資料 npm官方文件第二節(how npm works ): 
##【溫馨提醒】:任何一篇膾炙人口的博客,都比不上一本厚重的書籍和枯燥的文檔
 
【完】
#每天記10個小單字吧,重在累積哦!
memory:記憶體 Dependency:依賴 constraints:約束deploy:部署parameter:參數scope:作用域
#ecosystems:生態系統prefix:前綴Prior:優先/之前 revoke:撤銷
 ####
##

以上是npm的模組安裝機制詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

JavaScript,C和瀏覽器之間的關係JavaScript,C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪,JavaScript、C 和瀏覽器之間到底有什麼關係?它們之間看似毫無關聯,但實際上,它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章,你將了解到JavaScript如何在瀏覽器中運行,C 在瀏覽器引擎中的作用,以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道,JavaScript是前端開發的核心語言,它直接在瀏覽器中運行,讓網頁變得生動有趣。你是否曾經想過,為什麼JavaScr

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境