天天看點

玩轉 NPM玩轉 NPM

玩轉 NPM玩轉 NPM

本文從筆者的經驗,總結了npm安裝/解除安裝、更新、釋出這幾個最主要功能的正确使用姿勢和一些小技巧,順便從官網搬來了npm3處理依賴的重大變化。

<a></a>

npm團隊已經釋出了npm3,近期有小夥伴吐槽npm3安裝軟體包的時候很慢,一開始筆者也感覺相比npm2慢了不少,但經過了幾個版本的疊代,速度似乎又快起來了。

慢的同學是時候更新你的npm啦,而且之前安裝進度條模糊成一坨的問題也已經修複了。

玩轉 NPM玩轉 NPM
玩轉 NPM玩轉 NPM

npm提供了大量的指令,所有的指令幾乎都可以通過npm cmd [options]的方式使用。

學習一個指令行工具,最簡單直接的方式就是檢視它的使用者手冊,npm提供了并不算很詳細的指令行手冊,可以通過npm -h檢視(unix使用者還可以通過man npm檢視,相對來說比windows詳細多了),需要某個npm指令更詳細的文檔則需要通過npm help cmd如npm help install來檢視,注意不是 npm install help ,這樣将會安裝help包。

另外npm cmd -h也是一個快速檢視指令可以怎麼使用和搭配哪些常用選項的方法。

說到npm就不得不說package.json,每一個npm包都必須有一個package.json檔案,年輕時候的我還傻乎乎的從其他地方拷貝package.json過來然後修改,為了自動化還寫了個自動生成的腳本。

後來才發現原來npm自帶此功能,官方原廠功能更好更強大,隻需要執行npm init即可,以互動方式完成package.json的建立。

如果想生成預設package.json,可以執行npm init -y,連互動式界面都不會出現。

另外需要注意,npm init的時候需要輸入使用者字段,如果還沒有設定npm使用者,需要通過npm adduser設定。

事實上,最小機關的npm包就是隻包含一個package.json檔案的包,這樣的話npm init就完成了一個npm包的建立。

npm install作為npm最重要的功能和最常用的功能,不用過多說明,這裡隻介紹三個非常有用的選項–global,–save,–save-dev。

想必讀者肯定知道–global可以簡寫成-g,其實另外兩個選項也有簡寫形式,–save可以簡寫成-s,–save-dev可以簡寫成-d,注意大寫。

另外npm install也可以簡寫成npm i,相應的解除安裝指令npm uninstall可以簡寫成npm un,事實上npm的很多指令和選項在設計上都非常類似unix上的指令行功能,這裡指的是指令和選項都可以極大化地簡寫,隻要在不混淆的情況下。

npm uninstall和npm install接受同樣的選項和參數。

–save的作用是在packaje.json的dependencies字段增加或者修改一個安裝包和版本号名值對,–save-dev則是修改devdependencies,這樣就不用安裝了某個包之後手動修改package.json,npm已經幫我們把包依賴和版本管理做好了。

以安裝react為例,

npm i react -s将為package.json增加

<code>"dependencies": {</code>

<code>"react": "^0.14.7"</code>

<code>}</code>

npm i react -d将增加

<code>"devdependencies": {</code>

假如react@15(版本号,下同)釋出了,想嘗鮮的小夥伴該怎麼更新呢?

首先得知道npm上是否已經更新,npm info react可以檢視到react在npm上釋出過哪些版本以及最新的版本,但是内容太多,讓人眼花缭亂,配合grep會好一些。

其實我們隻想知道react最新的版本,使用npm dist-tags ls react直接列出react釋出過哪些tag,

<code>&gt; npm dist-tags ls react</code>

<code>0.10.0-rc1: 0.10.0-rc1</code>

<code>0.11.0-rc1: 0.11.0-rc1</code>

<code>latest: 0.14.7</code>

<code>next: 15.0.0-rc.1</code>

以及這些tag目前最新是哪些版本,比如最常用的latest,也是預設tag。

next tag已經釋出了react@15的第一個rc版了,嘗鮮的朋友可以試一試了。

另外一個指令npm outdated,會檢測目前安裝的所有npm包是否有更新,并列出可以更新的包,如果沒有任何輸出,那麼恭喜你,所有的包都是不需要更新的。

如果之前安裝的react版本是0.14.3,同時還安裝了[email protected],執行npm outdated會輸出

<code>package current wanted latest location</code>

<code>react 0.14.3 0.14.7 0.14.7 example</code>

<code>redux 3.2.0 3.3.1 3.3.1 example</code>

這種情況則說明react和redux該更新了,更新具體某個包使用npm update package_name即可,npm update則會更新所有可更新的包。

npm作為一個大倉庫,每天都有大量的新包釋出上來,釋出自己的包非常容易,而且幾乎零門檻,對應的釋出的指令是npm publish,但前提是你需要一個npm賬号。

假設已經有賬号了,在釋出之前需要使用npm login進行登入,正式釋出之前請先閱讀以下關于版本号的介紹。

npm包的版本号一般都是x.y.z的形式。

其中x表示主版本号,通常有重大改變或者達到裡程碑才改變;

y表示次要版本号,或二級版本号,在保證主體功能基本不變的情況下,如果适當增加了新功能可以更新此版本号;

z表示尾版本号或者更新檔号,一些小範圍的修修補補就可以更新更新檔号。

第一版本通常是0.0.1或者1.0.0,當修改了代碼,需要更新版本号重新釋出到npm,不知道的小夥伴(年輕的我)肯定會手動修改package.json的version字段,而進階的玩法是直接使用npm version &lt;update_type&gt;指令自動搞定。

詳細用法可通過npm help version檢視,這裡隻介紹最常用的三種。

<code>npm version patch =&gt; z+1</code>

<code>npm version minor =&gt; y+1 &amp;&amp; z=0</code>

<code>npm version major =&gt; x+1 &amp;&amp; y=0 &amp;&amp; z=0</code>

三個選項分别對應三部分的版本号,每次運作指令會導緻相應的版本号遞增一,同時子版本号清零。

如果npm包同時又是一個git倉庫,在運作了npm version &lt;update_type&gt;和npm publish之後,npm會自動給git倉庫打上一個跟目前版本号一樣的tag,對于挂在github上的npm包很有用。

上面介紹了npm包安裝/解除安裝、更新和釋出,幾乎能滿足日常使用了,另外再搬點幹貨過來。

npm3雖然慢,但解決了windows上npm包目錄太深的問題,相信使用過npm1或者npm2的都知道,node_modules太多太深了,甚至一不小心就超過windows資料總管能處理的最長路徑長度了,聽起來有點拗口,說白了這時候複制粘貼删除就會報錯了。

已經使用過npm3的肯定會發現,npm3将依賴子產品扁平化存放了,node_modules檔案夾裡面子檔案夾增多了,出現了很多沒有通過npm install安裝過的子產品。

npm3在安裝包的時候,由于每個包和包的依賴都會去計算是否需要再安裝,搜尋起來确實變慢了,好在至少現在的npm3速度還是可以接受的。

按照官方文檔介紹,npm3處理子產品依賴的方式跟npm2很不一樣。

假如我們寫了個子產品app,需要安裝兩個包a@1和c@1,其中a@1依賴另一個包b@1,c@1依賴b@2,用npm2和npm3安裝之後的依賴圖分别是這樣的

玩轉 NPM玩轉 NPM

npm3按照安裝順序存放依賴子產品,先安裝a@1,發現依賴子產品b@1沒有安裝過也沒有其他版本的b子產品沖突,是以b@1存放在第一級目錄,b@2為了避免和b@1的沖突,還是繼續放在c@1之下。

npm2沒什麼好說的,來什麼安裝什麼,根本不用理會公共依賴關系,依賴子產品一層一層往下存放就是了,下面重點講解npm3在這方面的改進。

現在app又需要安裝一個包d@1,d@1依賴b@2,使用npm3安裝之後,包結構将變成下面這樣

玩轉 NPM玩轉 NPM

雖然c@1和d@1都依賴b@2,但是由于a@1先安裝,a@1依賴的b@1已經安裝到第一級目錄了,後續需要安裝的所有包b,隻要版本不是1,都需要避免和b@1的沖突,是以隻能像npm2一樣,安裝在相應包下面。

接着又安裝了一個e@1,依賴b@1,因為b@1已經安裝過,且不會有版本沖突,這時候就不用重複安裝b@1了,包結構會變成這樣

玩轉 NPM玩轉 NPM

随着app更新了,需要把a@1更新到a@2,而a@2依賴b@2,把e@1更新到e@2,e@2也依賴b@2,那麼b@1将不會再被誰依賴,npm将解除安裝b@1,新的包結構将變成這樣

玩轉 NPM玩轉 NPM

可以看到出現了備援,結果跟預期的不一樣,既然所有對b的依賴都是b@2,那麼隻安裝一次就夠了。

npm在安裝包的時候沒有這麼“智能”,不過npm dedupe指令做的事就是重新計算依賴關系,然後将包結構整理得更合理。

執行一遍npm dedupe将得到

玩轉 NPM玩轉 NPM

這才是最優且符合預期的結構,看來在每次安裝/解除安裝了包之後最好重新執行npm dedupe,以保證包結構是最優的。

npm3通過将依賴子產品扁平化安裝,避免了備援又解決了windows上一大頭疼問題。

本文來自雲栖社群合作夥伴“linux中國”

原文釋出時間為:2013-04-02.

繼續閱讀