Created By JishuBao on 2019-03-20 12:38:22
Recently revised in 2019-03-20 12:38:22

 

  歡迎大家來到技術寶的掘金世界,您的star是我寫文章最大的動力！GitHub地址     

開篇題外話：

 最近在鑽研自己寫webpack的loader外掛等，就由於需要來回操作測試，需要用到很多Npm以及yarn的命令,所以就百度百度，很多情況都還是百度不到，為了不讓命令(本人太菜)成為成長路上的絆腳石，所以一氣之下將node以及相關的包等刪去，從頭開始！

文章簡介：

1、安裝node

2、npm解析

3、yarn解析

4、npm的未來：npm5.0

5、yarn/npm 常用命令對比

6、淘寶映象cnpm

7、pnpm瞭解

一、安裝Node

 什麼是Node?在Node官網的首頁中我們可以看到這麼一行定義。

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 
複製程式碼

 由於本文重點不在node上，而是重在於闡述node的模組管理工具npm/yarn上，所以一筆帶過。

 Node下載地址,進入node下載地址，點選選擇自己電腦相符合的包，本人一般都會選擇zip包(壓縮包),因為這樣是需要自己配置的，msi檔案系統會自己幫你配置,我總覺得自己可以配置的就不需要系統幫你配置,這樣風險也可以自己掌控！我的電腦是64位的,所以點選下面的連結。

 下載壓縮包到自己的指定資料夾目錄裡面

 我們下載了肯定要在任何地方使用，但此時我們加入在c盤輸入node，肯定會得到這樣的迴應：

 是不是有些小夥伴會很納悶，為啥呢，明明我都已經安裝了，沒錯，這時候“臭名昭著”的環境變數就進入我們的視線了,但是究竟什麼是環境變數呢？

 環境變數是什麼呢？其實我們可以把它理解為【系統的視線範圍】，沒錯，配置進入了環境變數的程式，就等於是進入了系統的視線範圍，開啟DOS命令視窗後輸入程式名，系統就會把在其視線內的（環境變數內）的程式找出來，如果程式沒有配置進入環境的變數的話，那系統自然就找不到。

 壓縮版與執行版還是有一定的差距,下載好Node後,在Node目錄下新建2個資料夾。

 其中：

node-global : npm全域性安裝位置
node-cache  : npm快取路徑
複製程式碼

 右鍵點選我的電腦/此電腦,屬性-->高階系統設定-->高階-->環境變數，點選使用者變數，新建環境變數。

 將node.exe 所在的目錄新增到path環境變數，這樣我們在使用命令列時就可以在任意路徑使用node命令了，同時該目錄下有一個npm.cmd檔案，開啟檔案其實就是將我們的npm命令對映到node.exe npm-cli.js，由於存在該對映所以只要把node.exe 所在的目錄新增到path環境變數，也可以在**任何目錄下執行npm install*了。

 寫到這裡其實node就算已經裝好了。在命令列中輸入如下命令測試:

node -v
npm -v
複製程式碼

 那麼node-global :npm全域性安裝位置，node-cache：npm 快取路徑 又是怎麼與npm發生關係呢？

 通過如下命令進行配置：

npm config set prefix "D:\node-v10.15.3-win-x64\node-global"

npm config set cache "D:\node-v10.15.3-win-x64\node-cache"
複製程式碼

 執行Npm命令進行測試:npm install webpack -g

 會發現node-global下node_modules中多了webpack資料夾

 webpack是用來打包的module，通常我們會在命令列中執行，而webpack同樣在node-global中做了對映，所以只需要將node-global加入path環境變數即可，上面已經配置完成。

 現在可以在命令列中任意路徑下執行node/npm/webpack命令了。

至此node已經完全安裝了。

二、npm解析

1.npm簡介：

 npm全稱為Node Package Manager，是一個基於Node.js的包管理器，也是整個Node.js社群最流行、支援的第三方模組最多的包管理器。

 npm的初衷：JavaScript開發人員更容易分享和重用程式碼。

 npm的使用場景：

 1.允許使用者獲取第三方包並使用。

 2.允許使用者將自己編寫的包或命令列程式進行釋出分享。

 npm版本查詢：npm -v

 npm安裝：

 1.安裝Node.js，由於新版的nodejs已經整合了npm，所以可直接通過輸入npm -v來測試是否成功安裝。

 2.使用Npm命令來升級Npm：npm install npm -g

2.npm工作原理：

1.什麼是包(package)？

 包是描述一個檔案或一個目錄。一個包的配置通常由以下構成：

 1.一個資料夾包含一個package.json配置檔案。

 2.包含（含有package.json檔案的資料夾）的Ｇzip壓縮檔案。

 3.解析gzip的url

 4.為登錄檔新增 <name>@<version>的url 資訊注意的是即使你從來沒有在註冊中心釋出你的公共包,你可能仍然可以得到很多所有這些package, 使用npm的好處:

 5.如果你只是計劃想寫增加一個節點或/。

 6.如果你安裝它也希望在其他地方分成一個tarball後進行包裝

Git url的形式

git:/ /github.com/user/project.git # commit-ish
git + ssh:/ / user@hostname:project.git # commit-ish
git +http://user@hostname專案/ blah.git # commit-ish
git +https://user@hostname專案/ blah.git # commit-ish
可以撿出commit-ish的一個git任何標籤和master分支、安全雜湊演算法。
複製程式碼

2.什麼是模組(module)？

 模板是通過配置檔案中的一個dom節點進行包含一個或多個包。通常一般由包和配置檔案以及相關模組程式構成完成一個或多個業務功能操作。一個模組可以在node . js 程式中裝滿任何的require()任何。 以下是所有事物載入模組的例子 :

1.一個資料夾package.json檔案包含一個main欄位。

2.一個資料夾index.js檔案。

3.一個JavaScript檔案。

3.npm的包和模組的關係

 一般來說在js程式中使用require載入它們的模組在節點中進行配置npm包，一個模組不一定是一個包。例如,一些cli包, js程式節點中只包含一個可執行的 命令列介面,不提供main欄位。 那麼這些包不是模組。幾乎所有npm包(至少,那些節點計劃)包含許多模組在他們(因為每個檔案載入require()是一個模組)。 幾乎所有的npm包都關聯著多個模組，因為每個檔案都使用require()載入一個模組。 從module載入檔案中的上下文node節點。如：var req =require('request')。我們可能會說,“request模組賦值給req這個變數”。

4.npm的生態系統

1.package.json檔案定義的是包。

2.node_modules資料夾是儲存模組的地方。便於js查詢模組。

 例如：如果建立一個node_modules/foo.js檔案，通過var f=require('foo.js')進行載入模組。因為它沒有package.json檔案所以foo.js不是一個包。 如果沒有建立index.js包或者package.json檔案"main"欄位,即使是在安裝node_modules,因為它沒有require()所以它不是一個模組。

3.npm相關常識

package.json檔案配置目錄：

三、yarn解析

 Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的JS包管理工具，正如官方文件中寫的，Yarn 是為了彌補 npm 的一些缺陷而出現的。

 在專案中安裝yarn

npm install -g yarn
複製程式碼

 1.npm install的時候巨慢。特別是新的專案拉下來要等半天，刪除node_modules，重新install的時候依舊如此。

 2.同一個專案，安裝的時候無法保持一致性。由於package.json檔案中版本號的特點，下面三個版本號在安裝的時候代表不同的含義。

"10.0.3",
"~10.0.3",
"^10.0.3"
複製程式碼

 “5.0.3”表示安裝指定的5.0.3版本，“～5.0.3”表示安裝5.0.X中最新的版本，“^5.0.3”表示安裝5.X.X中最新的版本。這就麻煩了，常常會出現同一個專案，有的同事是OK的，有的同事會由於安裝的版本不一致出現bug。

 3.安裝的時候，包會在同一時間下載和安裝，中途某個時候，一個包丟擲了一個錯誤，但是npm會繼續下載和安裝包。因為npm會把所有的日誌輸出到終端，有關錯誤包的錯誤資訊就會在一大堆npm列印的警告中丟失掉，並且你甚至永遠不會注意到實際發生的錯誤。

帶著這些坑，我開始瞭解Yarn的優勢及其解決的問題。

1.速度快

 1.並行安裝：無論 npm 還是 Yarn 在執行包的安裝時，都會執行一系列任務。npm 是按照佇列執行每個 package，也就是說必須要等到當前 package 安裝完成之後，才能繼續後面的安裝。而 Yarn 是同步執行所有任務，提高了效能。

 2.離線模式：如果之前已經安裝過一個軟體包，用Yarn再次安裝時之間從快取中獲取，就不用像npm那樣再從網路下載了。

2.安裝版本統一

 為了防止拉取到不同的版本，Yarn 有一個鎖定檔案 (lock file) 記錄了被確切安裝上的模組的版本號。每次只要新增了一個模組，Yarn 就會建立（或更新）yarn.lock 這個檔案。這麼做就保證了，每一次拉取同一個專案依賴時，使用的都是一樣的模組版本。npm 其實也有辦法實現處處使用相同版本的 packages，但需要開發者執行 npm shrinkwrap 命令。這個命令將會生成一個鎖定檔案，在執行 npm install 的時候，該鎖定檔案會先被讀取，和 Yarn 讀取 yarn.lock 檔案一個道理。npm 和 Yarn 兩者的不同之處在於，Yarn 預設會生成這樣的鎖定檔案，而 npm 要通過 shrinkwrap 命令生成 npm-shrinkwrap.json 檔案，只有當這個檔案存在的時候，packages 版本資訊才會被記錄和更新。

3.更簡潔的輸出

 npm 的輸出資訊比較冗長。在執行 npm install <package> 的時候，命令列裡會不斷地列印出所有被安裝上的依賴。相比之下，Yarn 簡潔太多：預設情況下，結合了 emoji直觀且直接地列印出必要的資訊，也提供了一些命令供開發者查詢額外的安裝資訊。

4.多註冊來源處理

 所有的依賴包，不管他被不同的庫間接關聯引用多少次，安裝這個包時，只會從一個註冊來源去裝，要麼是 npm 要麼是 bower, 防止出現混亂不一致。

5.更好的語義化

 yarn改變了一些npm命令的名稱，比如 yarn add/remove，感覺上比 npm 原本的 install/uninstall 要更清晰。

四、npm的未來:npm5.0

有了yarn的壓力之後，npm做了一些類似的改進。

 1.預設新增了類似yarn.lock的 package-lock.json；

 2.git 依賴支援優化：這個特性在需要安裝大量內部專案（例如在沒有自建源的內網開發），或需要使用某些依賴的未釋出版本時很有用。在這之前可能需要使用指定 commit_id 的方式來控制版本。

 3.檔案依賴優化：在之前的版本，如果將本地目錄作為依賴來安裝，將會把檔案目錄作為副本拷貝到 node_modules 中。而在 npm5 中，將改為使用建立 symlinks 的方式來實現（使用本地 tarball 包除外），而不再執行檔案拷貝。這將會提升安裝速度。目前yarn還不支援。

五、yarn/npm常用命令對比

npm install、npm install --save、npm install --save-dev區別：

1.npm install X:

• 會把X包安裝到node_modules目錄中
• 不會修改package.json
• 之後執行npm install命令時，不會自動安裝X

2.npm install X –save:

• 會把X包安裝到node_modules目錄中
• 會在package.json的dependencies屬性下新增X
• 之後執行npm install命令時，會自動安裝X到node_modules目錄中
• 之後執行npm install –production或者註明NODE_ENV變數值為production時，會自動安裝msbuild到node_modules目錄中

3.npm install X –-save-dev:

• 會把X包安裝到node_modules目錄中
• 會在package.json的devDependencies屬性下新增X
• 之後執行npm install命令時，會自動安裝X到node_modules目錄中
• 之後執行npm install –production或者註明NODE_ENV變數值為production時，不會自動安裝X到node_modules目錄中

使用原則：

 執行時需要用到的包使用–save，否則使用–-save-dev。

npm		yarn
npm install	安裝模組(install安裝是yarn預設行為)	yarn (install)
npm install -g <packageName>	全域性安裝模組	yarn global add <packageName>
npm install <packageName> --save	安裝指定模組	yarn add <packageName>
npm uninstall <packageName>	解除安裝指定模組	yarn remove <packageName>
npm uninstall -g <packageName>	解除安裝全域性模組	yarn global remove<packageName>
npm install <package> --save-dev	更新指定模組	yarn add <packageName> --dev
npm update <package> --save	更新指定模組	yarn upgrade <packageName>
npm outdated <package>	檢查模組是否過時
npm ls	檢視安裝的模組
npm init	在專案中引導建立一個package.json檔案
npm help	檢視某條命令的詳細幫助
npm root	檢視包的安裝路徑
npm config	管理npm的配置路徑
npm cache	管理模組的快取
npm start	啟動模組
npm stop	停止模組
npm adduser	使用者登陸
npm publish	釋出模組
npm list	檢視當前目錄下已安裝的node包

六、淘寶映象cnpm

 由於npm速度之慢,有時候下載依賴網速稍微不好就下載不下來,所以就引入了cnpm

安裝：命令提示符執行: npm install cnpm -g --registry=https://registry.npm.taobao.org。

注意：安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重新開啟，安裝完直接使用有可能會出現錯誤

PS：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm。cnpm還是有很多問題的,建議僅在install的時候使用cnpm。

七、pnpm瞭解

 本人沒有用過pnpm，傳說他比Npm快三倍,我估摸著就和cnpm差不多,但是可能比cnpm更加安全穩定等...具體的大家可以看pnpm。

如果你覺得我的文章還不錯的話，可以給個star哦~，GitHub地址