1、什麼是npm npm （ Node Package Manager ，即：node包管理器 ）是nodeJS的一個程式包管理和分發的管理工具，npm完全用 JavaScript 寫成，它可以讓全世界與Web前端相關開發者共享代碼，非常友善的使用各種插件、庫和架構，無需再到處去搜尋需要用到的這些程式。比如現在Web前端界“家喻戶曉”的： Bootstrap 、 jQuery 、 Vue 、 Angular 、 React 等，以及一些優化開發流程的前端開發自動化建構工具： Grunt 、 Gulp 、 Webpack 、 Babel 等都是可以通過npm非常友善地下載下傳或更新的。 除此之外，我們也可以貢獻一些自己寫的架構或者插件到npm，分享給全世界的前端開發者，讓大家都能使用你寫的程式。
2、使用npm有什麼好處 以前我們下載下傳一個需要用到的程式（插件、庫和架構）總是需要在搜尋引擎裡輸入該程式的關鍵字，然後再在搜尋出的結果中篩選出我們真正需要的程式，期間難免會誤進入一些廣告、釣魚、挂木馬等網站，或者下載下傳下來的程式包含病毒、木馬程式，又或者下載下傳到的程式版本非常舊等問題。就算勉強躲過了這些，找到了程式官網所在的位址，在一頁英文網站中找到适合自己計算機系統或正确版本的程式又得花上一些時間，特别是對英文基礎較差的開發者來說。
我們以 jQuery 的下載下傳為例來談談傳統開發者要下載下傳 jQuery 這個庫的繁瑣步驟。
- 打開浏覽器
- 在搜尋框内輸入jquery确定搜尋
- 點選jQuery的“正确”官網連結跳轉進jQuery的官網
- 找到相應的下載下傳按鈕并點選
- jQuery會跳轉到下載下傳頁，在這裡有幾個版本，分别是production版（生産環境版，即壓縮版）、 development（開發版，即未壓縮版）以及source map（資源鏡像）。除此之外，在這些連結的下方還包含了“精簡”後的各種環境版本
- 找到自己需要的版本點選下載下傳
以上差不多就是傳統的前端需要用到一個程式包的時候的一般操作步驟，如果是下載下傳 Apache 等多平台的伺服器端配置軟體需要的步驟會更加地繁瑣。 然而，對于以上操作使用 npm 下載下傳來說，隻需要兩個步驟：
- 打開系統指令行工具
- 輸入指令：npm install jquery
不僅如此，通過這種方式下載下傳的 jQuery 檔案是一套較為完整的 jQuery 架構檔案，裡面不僅包含了 jQuery 的各種場景所需版本，甚至還提供了子產品化開發所需的各種JS子產品檔案，對于熟悉 jQuery 的人來說，使用這些子產品最終會使得最終生成的 jQuery 非常的小，特别是經過 gzip 壓縮之後。
除此之外，npm還能下載下傳指定版本的程式包，比如現在我們需要下載下傳一個支援IE8的jQuery版本（1.x版），可以這樣輸入指令： npm install [email protected] 同理，如果需要的是v-2.x的版本還可以 npm install [email protected]
對于其它程式包需要下載下傳目前大版本的最新版仍然可以用這種方式，比如要下載下傳現在bootstrap最常用的第三版： npm install [email protected]
可以說是相對以往的任何方式都更加友善了。
3、安裝npm npm 原本是node的單獨項目，但現在在Windows系統和OS X系統中， npm 已經北極內建到了 nodejs 中，也就是說現在隻要你下載下傳了 nodejs 就可以使用 npm 了。點選下方的連結進入下載下傳頁，再根據你目前的作業系統下載下傳指定的版本（下錯了不能正常運作，解除安裝還麻煩）。 http://nodejs.cn/download/
怎麼檢視系統的位數？ 第一種方法：右鍵桌面“我的電腦”圖示，選擇屬性，在彈出的面闆中就可以看到作業系統的位數了。第二種方法：在指令行工具裡輸入指令 systeminfo 會顯示去目前系統的詳細資訊，其中“ 系統類型 ”就是目前系統的位數（如果是win10以前的系統，則顯示的結果是英文的，請自行翻譯）。另外補充一下，就是這個指令不僅反映了系統的位數，還包含了計算機作業系統的版本、電腦型号、CPU、記憶體等詳細資訊、計算機ID、作業系統最後一次安裝的時間（包括修複），作為一名從事計算機行業的工作者，有必要了解一下。（如果是想了解圖形處理相關的資訊，更簡單一點的辦法就是在 win+R 之後直接輸入 dxdiag 即可）
nodejs 下載下傳完成後像正常軟體那樣進行安裝即可，但路徑最好選擇一個比較容易查找的（盤符的根目錄是最好的選擇），因為我們以後可能經常都會使用到 nodejs 裡面的 npm 。 nodejs 安裝完成之後檢查 npm 是否可用，可以在指令行工具裡面輸入： npm -v ，如果結果是一串數字的版本号，那證明安裝成功， npm 已經可用。但如果提示“npm不是内部或外部的指令...”那就要進入系統設定一下環境變量了。
以win10為例，第一步： 右鍵“此電腦”選擇屬性，在彈出的視窗中選擇“進階系統設定”。
第二步： 點選圖示“環境變量”按鈕。
第三步： 選擇“PATH”，然後點選圖示編輯按鈕。
第四步： 找到 nodejs 安裝的根目錄，看是否有 npm 和 npm.cmd 這兩個檔案， npm.cmd 這個檔案就是用于windows作業系統cmd指令行工具的關鍵，也就是說，以後凡是以後大家在安裝了任何需要指令行啟動的程式，但發現該程式不可用時（“ xxx 不是内部或外部指令”），都可以找到帶 .cmd 字尾的檔案來解決這個問題。
接着點選并複制目前資料總管的路徑（不包含檔案本身，隻需要目前路徑即可）。
第五步： 回到剛才的“編輯環境變量”視窗，點選“建立”按鈕，将剛才複制的路徑粘貼在編輯區域，如圖。
完成後點選“确定”按鈕儲存剛才的操作，接着再在剛才打開的“環境變量”視窗中對“系統變量”中的Path也進行上述同樣的操作，讓計算機系統也具有該指令的權限。然後點選“确定”按鈕完成。接着再打開指令行工具輸入指令檢視npm是否輸出版本号來驗證是否安裝成功。
4、更改npm的全局安裝路徑 npm 的預設安裝路徑是在目前計算級使用者目錄下的一個隐藏檔案 AppData 下面的檔案夾裡，每次要使用到我們安裝程式包的一些單獨的分發檔案（Dist File）非常不友善，是以我們需要建立一個自定義的目錄，讓每次通過npm全局安裝的程式包都能在這個目錄下面以便于我們統一管理。
檢視目前 npm 全局安裝路徑位置的指令是： npm config get prefix
要設定 npm 的全局安裝的目錄有兩種方法。
第一種，打開指令行視窗，分别輸入以下指令： npm config set prefix "E:\NpmInstall" npm config set cache "E:\NpmInstall\cache"
第一行設定的是全局安裝程式包的目錄，第二行設定的是全局緩存的目錄，這會讓我們在下載下傳（之前被手動删除過的程式包）或更新程式包的時候速度更加的迅速。 這裡要注意盤符裡的檔案夾都是我們預先建立好的，盤符自己根據需要選擇，檔案夾名也可以根據習慣自定。
第二種，找到 npm 檔案夾下一個叫做 npmrc 的檔案，用notepad++等文本編輯器打開進行編輯。
然後進行如下配置：
完成後儲存關閉該檔案，注意盤符和檔案夾名是你自己的。
<特别注意>如果做了自定義全局安裝的路徑，也要将目前檔案夾所在的路徑也要添加進“系統環境變量”裡，否則以後安裝的一些帶指令的程式包（如：cnpm、gulp、webpack、babel等）的指令都會無效。（如上配置的話，配置全局變量的路徑就應該是“E:\devTools\npmInstall”了）
這樣一來，我們通過全局安裝的程式包就會在你建立的檔案夾内了。 現在我們就用 npm 來下載下傳第一個程式包“jquery”吧，在指令行視窗輸入以下指令： npm install -g jquery 或者 npm install jquery -g
其中 -g 表示的是全局，如果不加上該指令，程式包會安裝在你指令行内目前指定的目錄下，這樣不便于以後的管理，是以，我們在安裝程式包的時候應該總是加上 -g 這個指令。
等待jQuery安裝完成後，我們進入自己剛才自定義的全局目錄下，不出意外的話在該檔案夾内多出一個檔案夾 node_modules ，我們以後下載下傳的所有程式包都會存放在這個檔案夾裡（這個檔案夾我們不要去改它的名字，否則裡面的子產品在進行AMD模式開發的時候将不能正常使用）。
打開這個檔案夾，看看我們剛才下載下傳的 jquery 是否已經在這裡了，打開 jquery 檔案夾應該是下面這樣。
那麼，恭喜你！你的 npm 已經能夠正常使用了。
5、對npm提速的cnpm 由于 npm 是國外的伺服器，在國内使用很多時候會不穩定，出現下載下傳“假死”或速度過慢的現象（如果出現這樣的情況我們可以 Ctrl+C 結束程序）。為了解決這個問題阿裡集團的一個團隊為 npm 建立了一個國内的伺服器鏡像——淘寶鏡像（ cnpm ），它以10分鐘為機關保持與國外 npm 伺服器的同步頻率。也就是說我們直接可以通過淘寶鏡像去下載下傳或更新我們的程式包，而不必去忍受緩慢的程式包下載下傳速度了。
要安裝淘寶鏡像，需要在指令行中輸入以下指令： npm install -g cnpm --registry=https://registry.npm.taobao.org 但這樣一來我們在下載下傳程式包的時候應該使用的指令是 cnpm （前面多了個“c”）而不是 npm 了。
安裝完淘寶鏡像之後，我們手動删除剛才下載下傳的 jquery 程式包，再通過淘寶鏡像來下載下傳一次吧： cnpm install -g jquery
安裝完成之後記得去檢查一下我們全局下載下傳檔案夾内的 jquery 是否下載下傳成功。
6、删除程式包 要删除通過 npm 安裝的程式包，可以使用以下指令： npm uninstall <包名> 或 npm uninstall -g <包名>
如果後面使用了AMD依賴開發的模式使用了這樣的指令安裝： npm install -g <包名> --save-dev （在開發環境依賴程式包） 或 npm install -g <包名> --save （在生産線上環境依賴程式包）
那我們在進行解除安裝的時候也應該對應後方的指令： npm uninstall <包名> --save-dev 或 npm uninstall -g <包名> --save
如果後面的指令沒有對應上是不能正常解除安裝的。
7、更新程式包 需要知道哪些程式包需要更新，可以使用指令： npm outdated -g --depth=0 由于這個檢查會連接配接npm伺服器，是以可能會有些慢，稍微等待即可。如果已經安裝了淘寶鏡像，那則最好的選擇就是使用淘寶鏡像檢測更新： cnpm outdated -g --depth=0
如果有軟體需要更新，會在輸入這條指令後。如果後面傳回了資訊，并且發現“current”和“latest”這兩列的版本号是不一樣的，那就說明是可以進行更新的，如果是下面這種情況或者是是沒有傳回資訊，說明目前沒有程式包需要更新。
當然，這個指令不需要切換檔案夾路徑，在任何目錄下都可以輸入該指令，因為該指令帶有 -g 的指令。
接着對需要更新的程式包執行以下指令即可： npm update -g <包名>
但實際上很多時候可以用以下指令來更新更為穩妥： npm install -g <包名>
是的，就是重新安裝一遍而已，由于起初已經設定了下載下傳的 catch ，那重新安裝一遍的速度也應該是比較快的，用淘寶鏡像更是幾秒内的事。
實際上，可以通過以下指令來更新全局的所有包，但在有的時候會産生逾時錯誤，是以一般不是很推薦使用。 npm update -g
8、程式包JSON管理檔案 當一個項目的基本檔案目錄結建構立，按照現在前端開發工程師的一個習慣，都會在項目根目錄下建立一個 package.json 檔案，觸發該檔案建立的指令是： npm init 根據提示進行配置，每步完成按Enter鍵确認。
通常第一個出現的配置項是name，表示目前項目的名稱，名稱的設定有以下五個要求： （1）英文字元必須是全部小寫的 （2）名稱間不能出現空格（如：test webpack） （3）名稱不得過長 （4）不能為中文 （5）可以使用連接配接線（-）和下劃線（_） 否則都會錯誤并要求重新輸入。
這裡再說說其它填寫項的作用：
version —— 表示配置檔案的版本号。可跳過 description —— 配置檔案描述文本。可跳過可手動輸入 entry point —— 入口JS檔案。可跳過可手動輸入 test command —— 快捷指令設定。可跳過 dependencies —— 依賴。可跳過，後續自動生成 keywords —— 關鍵字設定。可跳過 git repository —— git倉庫。可跳過 author —— 作者名稱 license: (ISC) —— 許可證，可跳過
當所有配置項都輸入完成後按照要求輸入指令 yes 即可完成配置，并在目前目錄下生成一個 pakage.json 檔案了。既然生成的是一個json檔案，也就是說我們可以随時去手動修改我們生成的這個檔案了，以後也有很多配置屬性是在其它程式包的指令使用的時候幫我們自動生成的。
實際上，如果你不喜歡這樣繁瑣的問答生成方式可以使用更快速的生成方式： npm init --yes 使用這條指令的前提是你目前項目的命名滿足規範，也就是上面提到name的那五個要求。（其實哪怕平時我們不使用npm建構項目的時候，也應該有這樣良好的項目命名習慣，檔案命名也是提升我們項目可擴充性的一個重要要求。）
關于 pakage.json 更多的使用方式，我們會在以後的Web前端自動化建構相關的課程裡講到。就現在而言，我們隻需要将其認作是一個反應項目資訊的檔案就好，雖說它是一個功能性檔案。