前言

我們在開發時，會用到很多別人寫的JavaScript程式碼。如果我們要使用別人寫的某個包，每次都根據名稱搜尋一下官方網站，下載程式碼，解壓，再使用，非常繁瑣。 
於是一個集中管理的工具應運而生：大家都把自己開發的模組打包後放到一個包管理器上，如果要使用，直接通過包管理器安裝就可以直接用，不用管程式碼存在哪，應該從哪下載。

因此使用包管理器主要基於以下幾個原因：

• 方便的尋找和下載你需要的依賴庫，並將它們整合到專案中，例如jQuery, Angular等。
• 方便的下載指定版本的依賴庫（免除去網路上搜索和下載）
• 便於你使用簡單的方法獲取你想要的依賴庫

NPM

概念

npm有兩層含義。一層含義是Node的開放式模組登記和管理系統，網址為npmjs.org。另一層含義是Node預設的模組管理器，是一個命令列下的軟體，用來安裝和管理Node模組。

npm不需要單獨安裝。在安裝Node的時候，會連帶一起安裝npm。但是，Node附帶的npm可能不是最新版本，最好用下面的命令，更新到最新版本。

npm install [email protected] -g

• 或用：npm i -g npm也可以更新
• 執行下面的命令，檢視各種資訊。

# 檢視 npm 命令列表
$ npm help

# 檢視各個命令的簡單用法
$ npm -l

# 檢視 npm 的版本
$ npm -v

# 檢視 npm 的配置
$ npm config list -l

npm是一個讓JavaScript程式設計師分享和複用程式碼的工具。有了它，JS程式設計師能高效地管理和釋出自己要分享的程式碼。

package.json

npm init;

• 通過上面這條命令初始化，目錄中會多了一個名為package.json的檔案。 

package.json用於說明NPM的配置資訊。

package.json裡面有兩個物件是用來指定依賴的：

• “dependencies”:這個物件下面列出生產環境下的依賴
• “devDependencies”:這個物件下面列出開發環境的依賴

npm install

Node模組採用npm install命令安裝。

每個模組可以全域性安裝，也可以本地安裝。

• 全域性安裝：指的是將一個模組安裝到系統目錄中，各個專案都可以呼叫。 
  一般來說，全域性安裝只適用於工具模組，比如eslint和gulp。
• 本地安裝：指的是將一個模組下載到當前專案的node_modules子目錄，然後只有在專案目錄之中，才能呼叫這個模組。

# 本地安裝
$ npm install <package name>

# 全域性安裝
$ sudo npm install -global <package name>
$ sudo npm install -g <package name>

npm install也支援直接輸入Github程式碼庫地址。

在安裝之前，npm install會先檢查，node_modules目錄中是否已經存在指定模組，如果存在就不再重新安裝了，即使遠成倉庫已經有了一個新版本也是如此。

如果希望一個模組不管是否安裝過，npm都要強制安裝，可以使用-f或–force引數：

npm install <packageName> --force

• 1

install命令可以使用不同引數，指定所安裝的模組屬於哪一種性質的依賴關係，即出現在packages.json檔案的哪一項中。

• 往package.json裡面新增生產環境的依賴，被新增到dependencies：

npm install <package_name> --save

• 1

• 新增開發環境的依賴，被新增到devDependencies：

 npm install <package_name> --save-dev

• 1

如果當前環境下有package.json，直接執行下面的命令：

npm install

• 1

npm install預設會安裝dependencies欄位和devDependencies欄位中的所有模組。

npm update

如果想更新已安裝模組，就要用到npm undate命令。

# 升級當前專案的指定模組
$ npm update [package name]

# 升級全域性安裝的模組
$ npm update -global [package name]

它會先到遠端倉庫查詢最新版本，然後查詢本地版本。如果本地版本不存在，或者遠端版本較新，就會安裝。

使用-S或–save引數，可以在安裝的時候更新package.json裡面模組的版本號。

npm info

npm info命令可以檢視每個模組的具體資訊。比如，檢視underscore模組的資訊。

npm info underscore

• npm search

npm search命令用於搜尋npm倉庫，它後面可以跟字串，也可以跟正則表示式。

npm search <搜尋詞>

• npm list

npm list命令以樹型結構列出當前專案安裝的所有模組，以及它們依賴的模組。

npm list

• 加上global引數，會列出全域性安裝的模組。

npm list -global

• npm list命令也可以列出單個模組。

npm list underscore

• npm倉庫

npm update命令怎麼知道每個模組的最新版本呢？

npm 模組倉庫提供了一個查詢服務，叫做 registry 。 
以 npmjs.org 為例，它的查詢服務網址是 https://registry.npmjs.org/ 。 
這個網址後面跟上模組名，就會得到一個 JSON 物件，裡面是該模組所有版本的資訊。 
比如，訪問 https://registry.npmjs.org/react，就會看到 react 模組所有版本的資訊。 
它跟下面命令的效果是一樣的。

npm view react

# npm view 的別名
npm info react
npm show react
npm v react

registry 網址的模組名後面，還可以跟上版本號或者標籤，用來查詢某個具體版本的資訊。比如， 訪問 https://registry.npmjs.org/react/v0.14.6 ，就可以看到 React 的 0.14.6 版。

返回的 JSON 物件裡面，有一個dist.tarball屬性，是該版本壓縮包的網址。

要解除安裝安裝過的包，用以下指令即可：

dist: {
  shasum: '2a57c2cf8747b483759ad8de0fa47fb0c5cf5c6a',
  tarball: 'http://registry.npmjs.org/react/-/react-0.14.6.tgz' 
},

到這個網址下載壓縮包，在本地解壓，就得到了模組的原始碼。npm install和npm update命令，都是通過這種方式安裝模組的。

npm uninstall --save jquery

Bower：

概念

Bower是一個客戶端技術的軟體包管理器，它可用於搜尋、安裝和解除安裝如JavaScript、HTML、CSS之類的網路資源。 
其他還有一些建立在Bower基礎之上的開發工具，如YeoMan和Grunt。

前提準備

為了安裝bower，你首先需要安裝如下檔案：

• Node：下載最新版本的node.js
• NPM：NPM是node程式包管理器。它是捆綁在nodejs的安裝程式上的，所以一旦你已經安裝了node，NPM也就安裝好了。
• Git：你需要從git倉庫獲取一些程式碼包。

安裝Bower

一旦你已經安裝了上面所說的所有必要檔案，鍵入以下命令安裝Bower：

npm install -g bower

• 1

這行命令是Bower的全域性安裝，-g 操作表示全域性。

包的安裝

Bower是一個軟體包管理器，所以你可以在應用程式中用它來安裝新的軟體包。 
舉例來看一下來如何使用Bower安裝JQuery，在你想要安裝該包的地方建立一個新的資料夾，鍵入如下命令：

bower install jquery

• 1

上述命令完成以後，你會在你剛才建立的目錄下看到一個bower_components的資料夾，其中有一個jquery目錄。 
這樣就可以在工程中使用jQuery了：

<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>

• 1

包的列表

如果你想找出所有安裝在應用程式中的包，可以使用list命令：

bower list

• 1

包的搜尋

假如你想在你的應用程式中使用twitter的bootstrap框架，但你不確定包的名字，這時你可以使用search 命令：

bower search bootstrap

• 1

包的資訊

如果你想看到關於特定的包的資訊，可以使用info 命令來檢視該包的所有資訊：

bower info bootstrap

• 1

包的解除安裝

解除安裝包可以使用uninstall 命令：

bower uninstall jquery

• 1

bower.json檔案的使用

bower.json檔案的使用可以讓包的安裝更容易，你可以在應用程式的根目錄下建立一個名為“bower.json”的檔案，並定義它的依賴關係。 
使用bower init 命令來建立bower.json檔案：

{
  "name": "blog",
  "version": "0.0.1",
  "authors": [
    "Shekhar Gulati <[email protected]>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "bootstrap": "~3.0.0"
  }
}

dependencies中說明了安裝的模組及其版本。

總結

npm和bower太像了，就像一對孿生兄弟…… 
npm的檔案是package.json，包安裝的目錄是node_modules。 
bower的檔案是bower.json，包安裝的目錄是bower_components。

使用命令也基本一致……