Vue筆記——npm詳細教程

阿新 • • 發佈：2018-12-12

什麼是 NPM

npm 之於 Node.js ，就像 pip 之於 Python， gem 之於 Ruby， pear 之於 PHP 。

npm 是 Node.js 官方提供的包管理工具，他已經成了 Node.js 包的標準釋出平臺，用於 Node.js 包的釋出、傳播、依賴控制。npm 提供了命令列工具，使你可以方便地下載、安裝、升級、刪除包，也可以讓你作為開發者釋出並維護包。

為什麼要使用 NPM

npm 是隨同 Node.js 一起安裝的包管理工具，能解決 Node.js 程式碼部署上的很多問題，常見的場景有以下幾種：

允許使用者從 npm 伺服器下載別人編寫的第三方包到本地使用。
允許使用者從 npm 伺服器下載並安裝別人編寫的命令列程式到本地使用。

允許使用者將自己編寫的包或命令列程式上傳到 npm 伺服器供別人使用。

npm 的背後，是基於 couchdb 的一個數據庫，詳細記錄了每個包的資訊，包括作者、版本、依賴、授權資訊等。它的一個很重要的作用就是：將開發者從繁瑣的包管理工作（版本、依賴等）中解放出來，更加專注於功能的開發。

如何使用 NPM

安裝

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

$ sudo npm install [email protected] -g

如果是 Window 系統使用以下命令即可：

npm install npm -g

也就是使用 npm 安裝自己。之所以可以這樣，是因為 npm 本身與 Node 的其他模組沒有區別。然後，執行下面的命令，檢視各種資訊。

# 檢視 npm 命令列表
$ npm help

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

# 檢視 npm 的版本
$ npm -v

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

使用

npm init

npm init 用來初始化生成一個新的 package.json 檔案。它會向用戶提問一系列問題，如果你覺得不用修改預設配置，一路回車就可以了。如果使用了 -f（代表 force）、-y（代表 yes），則跳過提問階段，直接生成一個新的 package.json 檔案。

$ npm init -y

npm set

npm set 用來設定環境變數

$ npm set init-author-name 'Your name'
$ npm set init-author-email 'Your email'
$ npm set init-author-url 'http://yourdomain.com'
$ npm set init-license 'MIT'

上面命令等於為 npm init 設定了預設值，以後執行 npm init 的時候，package.json 的作者姓名、郵件、主頁、許可證欄位就會自動寫入預設的值。這些資訊會存放在使用者主目錄的 ~/.npmrc 檔案，使得使用者不用每個專案都輸入。如果某個專案有不同的設定，可以針對該專案執行 npm config。

npm info

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

$ npm info underscore

上面命令返回一個 JavaScript 物件，包含了 underscore 模組的詳細資訊。這個物件的每個成員，都可以直接從 info 命令查詢。

$ npm info underscore description

$ npm info underscore homepage

$ npm info underscore version

npm search

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

$ npm search <搜尋詞>

npm list

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

$ npm list

# 加上 global 引數，會列出全域性安裝的模組
$ npm list -global

# npm list 命令也可以列出單個模組
$ npm list underscore

npm install

使用 npm 安裝包的命令格式為：npm [install/i] [package_name]

本地模式和全域性模式

npm 在預設情況下會從 http://npmjs.org 搜尋或下載包，將包安裝到當前目錄的 node_modules 子目錄下。

如果你熟悉 Ruby 的 gem 或者 Python 的 pip，你會發現 npm 與它們的行為不同，gem 或 pip 總是以全域性模式安裝，使包可以供所有的程式使用，而 npm 預設會把包安裝到當前目錄下。這反映了 npm 不同的設計哲學。如果把包安裝到全域性，可以提供程式的重複利用程度，避免同樣的內容的多分副本，但壞處是難以處理不同的版本依賴。如果把包安裝到當前目錄，或者說本地，則不會有不同程式依賴不同版本的包的衝突問題，同時還減輕了包作者的 API 相容性壓力，但缺陷則是同一個包可能會被安裝許多次。

我們在使用 supervisor 的時候使用了 npm install -g supervisor 命令，就是以全域性模式安裝 supervisor 。

這裡注意一點的就是，supervisor 必須安裝到全域性，如果你不安裝到全域性，錯誤命令會提示你安裝到全域性。如果不想安裝到預設的全域性，也可以自己修改全域性路徑到當前路徑 npm config set prefix "路徑" 安裝完以後就可以用 supervisor 來啟動服務了。

supervisor 可以幫助你實現這個功能，它會監視你對程式碼的驅動，並自動重啟 Node.js 。

一般來說，全域性安裝只適用於工具模組，比如 eslint 和 gulp 。關於使用全域性模式，多數時候並不是因為許多程式都有可能用到了它，為了減少多重副本而使用全域性模式，而是因為本地模式不會註冊 PATH 環境變數。

“本地安裝” 指的是將一個模組下載到當前專案的 node_modules 子目錄，然後只有在專案目錄之中，才能呼叫這個模組。

本地模式和全域性模式的特點如下：

模式	可通過 require 使用	註冊 PATH
本地模式	是	否
全域性模式	否	是

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

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

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

$ npm install git://github.com/package/path.git
$ npm install git://github.com/package/path.git#0.1.0

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

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

$ npm install <packageName> --force

安裝不同版本

install 命令總是安裝模組的最新版本，如果要安裝模組的特定版本，可以在模組名後面加上 @ 和版本號。

$ npm install [email protected]
$ npm install [email protected]
$ npm install [email protected]">=0.1.0 <0.2.0"

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

–save：模組名將被新增到 dependencies，可以簡化為引數 - S。 –save-dev：模組名將被新增到 devDependencies，可以簡化為引數 - D。

$ npm install sax --save
$ npm install node-tap --save-dev
# 或者
$ npm install sax -S
$ npm install node-tap -D

dependencies 依賴

這個可以說是我們 npm 核心一項內容，依賴管理，這個物件裡面的內容就是我們這個專案所依賴的 js 模組包。下面這段程式碼表示我們依賴了 markdown-it 這個包，版本是 ^8.1.0 ，代表最小依賴版本是 8.1.0 ，如果這個包有更新，那麼當我們使用 npm install 命令的時候，npm 會幫我們下載最新的包。當別人引用我們這個包的時候，包內的依賴包也會被下載下來。

"dependencies": {
    "markdown-it": "^8.1.0"
}

devDependencies 開發依賴

在我們開發的時候會用到的一些包，只是在開發環境中需要用到，但是在別人引用我們包的時候，不會用到這些內容，放在 devDependencies 的包，在別人引用的時候不會被 npm 下載。

"devDependencies": {
    "autoprefixer": "^6.4.0",0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1",
    "highlightjs": "^9.8.0"
}

當你有了一個完整的 package.json 檔案的時候，就可以讓人一眼看出來，這個模組的基本資訊，和這個模組所需要依賴的包。我們可以通過 npm install 就可以很方便的下載好這個模組所需要的包。

npm install 預設會安裝 dependencies 欄位和 devDependencies 欄位中的所有模組，如果使用 --production 引數，可以只安裝 dependencies 欄位的模組。

$ npm install --production
# 或者
$ NODE_ENV=production npm install

一旦安裝了某個模組，就可以在程式碼中用 require 命令載入這個模組。

var backbone = require('backbone')
console.log(backbone.VERSION)

npm run

npm 不僅可以用於模組管理，還可以用於執行指令碼。package.json 檔案有一個 scripts 欄位，可以用於指定指令碼命令，供 npm 直接呼叫。 package.json

{
  "name": "myproject",
  "devDependencies": {
    "jshint": "latest",
    "browserify": "latest",
    "mocha": "latest"
  },
  "scripts": {
    "lint": "jshint **.js",
    "test": "mocha test/"
  }
}

scripts 指令碼

顧名思義，就是一些指令碼程式碼，可以通過 npm run script-key 來呼叫，例如在這個 package.json 的資料夾下使用 npm run dev 就相當於運行了 node build/dev-server.js 這一段程式碼。使用 scripts 的目的就是為了把一些要執行的程式碼合併到一起，使用 npm run 來快速的執行，方便省事。 npm run 是 npm run-script 的縮寫，一般都使用前者，但是後者可以更好的反應這個命令的本質。

// 指令碼
"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "docs": "node build/docs.js",
    "build-docs": "npm run docs & git checkout gh-pages & xcopy /sy dist\\* . & git add . & git commit -m 'auto-pages' & git push & git checkout master",
    "build-publish": "rmdir /S /Q lib & npm run build &git add . & git commit -m auto-build & npm version patch & npm publish & git push",
    "lint": "eslint --ext .js,.vue src"
}

npm run 如果不加任何引數，直接執行，會列出 package.json 裡面所有可以執行的指令碼命令。 npm 內建了兩個命令簡寫， npm test 等同於執行 npm run test，npm start 等同於執行 npm run start。

"build": "npm run build-js && npm run build-css"

上面的寫法是先執行 npm run build-js ，然後再執行 npm run build-css ，兩個命令中間用 && 連線。如果希望兩個命令同時平行執行，它們中間可以用 & 連線。

寫在 scripts 屬性中的命令，也可以在 node_modules/.bin 目錄中直接寫成 bash 指令碼。下面是一個 bash 指令碼。

#!/bin/bash

cd site/main
browserify browser/main.js | uglifyjs -mc > static/bundle.js

假定上面的指令碼檔名為 build.sh ，並且許可權為可執行，就可以在 scripts 屬性中引用該檔案。

"build-js": "bin/build.sh"

pre- 和 post- 指令碼

npm run 為每條命令提供了 pre- 和 post- 兩個鉤子（hook）。以 npm run lint 為例，執行這條命令之前，npm 會先檢視有沒有定義 prelint 和 postlint 兩個鉤子，如果有的話，就會先執行 npm run prelint，然後執行 npm run lint，最後執行 npm run postlint。

{
  "name": "myproject",
  "devDependencies": {
    "eslint": "latest"
    "karma": "latest"
  },
  "scripts": {
    "lint": "eslint --cache --ext .js --ext .jsx src",
    "test": "karma start --log-leve=error karma.config.js --single-run=true",
    "pretest": "npm run lint",
    "posttest": "echo 'Finished running tests'"
  }
}

上面程式碼是一個 package.json 檔案的例子。如果執行 npm test，會按下面的順序執行相應的命令。 1. pretest 2. test 3. posttest

如果執行過程出錯，就不會執行排在後面的指令碼，即如果 prelint 指令碼執行出錯，就不會接著執行 lint 和 postlint 指令碼。

npm bin

npm bin 命令顯示相對於當前目錄的，Node 模組的可執行指令碼所在的目錄（即 .bin 目錄）。

# 專案根目錄下執行
$ npm bin
./node_modules/.bin

建立全域性連結

npm 提供了一個有趣的命令 npm link，它的功能是在本地包和全域性包之間建立符號連結。我們說過使用全域性模式安裝的包不能直接通過 require 使用。但通過 npm link 命令可以打破這一限制。舉個例子，我們已經通過 npm install -g express 安裝了 express，這時在工程的目錄下執行命令：

npm link express ./node_modules/express -> /user/local/lib/node_modules/express

我們可以在 node_modules 子目錄中發現一個指向安裝到全域性的包的符號連結。通過這種方法，我們就可以把全域性包當做本地包來使用了。

除了將全域性的包連結到本地以外，使用 npm link 命令還可以將本地的包連結到全域性。使用方法是在包目錄（package.json 所在目錄）中執行 npm link 命令。如果我們要開發一個包，利用這種方法可以非常方便地在不同的工程間進行測試。

建立包

包是在模組基礎上更深一步的抽象，Node.js 的包類似於 C/C++ 的函式庫或者 Java、.Net 的類庫。它將某個獨立的功能封裝起來，用於釋出、更新、依賴管理和版本控制。Node.js 根據 CommonJS 規範實現了包機制，開發了 npm 來解決包的釋出和獲取需求。

Node.js 的包是一個目錄，其中包含了一個 JSON 格式的包說明檔案 package.json。嚴格符合 CommonJS 規範的包應該具備以下特徵：

package.json 必須在包的頂層目錄下；
二進位制檔案應該在 bin 目錄下；
JavaScript 程式碼應該在 lib 目錄下；
文件應該在 doc 目錄下；
單元測試應該在 test 目錄下。

Node.js 對包的要求並沒有這麼嚴格，只要頂層目錄下有 package.json，並符合一些規範即可。當然為了提高相容性，我們還是建議你在製作包的時候，嚴格遵守 CommonJS 規範。

我們也可以把資料夾封裝為一個模組，即所謂的包。包通常是一些模組的集合，在模組的基礎上提供了更高層的抽象，相當於提供了一些固定介面的函式庫。通過定製 package.json，我們可以建立更復雜，更完善，更符合規範的包用於釋出。

Node.js 在呼叫某個包時，會首先檢查包中 packgage.json 檔案的 main 欄位，將其作為包的介面模組，如果 package.json 或 main 欄位不存在，會嘗試尋找 index.js 或 index.node 作為包的介面。

package.json 是 CommonJS 規定的用來描述包的檔案，完全符合規範的 package.json 檔案應該含有以下欄位：

name: 包的名字，必須是唯一的，由小寫英文字母、數字和下劃線組成，不能包含空格。
description: 包的簡要說明。
version: 符合語義化版本識別規範的版本字串。
keywords: 關鍵字陣列，通常用於搜尋。
maintainers: 維護者陣列，每個元素要包含 name 、email(可選)、web(可選) 欄位。
contributors: 貢獻者陣列，格式與 maintainers 相同。包的作者應該是貢獻者陣列的第一個元素。
bugs: 提交 bug 的地址，可以是網址或者電子郵件地址。
licenses: 許可證陣列，每個元素要包含 type（許可證的名稱）和 url（連結到許可證文字的地址）欄位。
repositories: 倉庫託管地址陣列，每個元素要包含 type（倉庫的型別，如 git）、URL（倉庫的地址）和 path（相對於倉庫的路徑，可選）欄位。
dependencies: 包的依賴，一個關聯陣列，由包名稱和版本號組成。

包的釋出

通過使用 npm init 可以根據互動式回答產生一個符合標準的 package.json。建立一個 index.js 作為包的介面, 一個簡單的包就製作完成了。

在釋出前, 我們還需要獲得一個賬號用於今後維護自己的包, 使用 npm adduser 根據提示完成賬號的建立。

完成後可以使用 npm whoami 檢測是否已經取得了賬號。

接下來，在 package.json 所在目錄下執行 npm publish，稍等片刻就可以完成釋出了，開啟瀏覽器，訪問 http://search.npmjs.org/ 就可以找到自己剛剛釋出的包了。現在我們可以在世界的任意一臺計算機上使用 npm install neveryumodule 命令來安裝它。

如果你的包將來有更新, 只需要在 package.json 檔案中修改 version 欄位，然後重新使用 npm publish 命令就行了。如果你對已釋出的包不滿意，可以使用 npm unpublish 命令來取消釋出。

需要說明的是：json 檔案不能有註釋

參考連結

我的常用命令

npm version  檢視npm和node的版本
npm list --depth=0 [-g]  檢視[全域性]安裝的包
npm root [-g]  檢視[全域性的]包的安裝路徑