NPM 包管理工具
1.1 定義:什么是 NPM
NPM 全稱 Node Package Manager,它是 JavaScript 的包管理工具, 並且是 Node.js 平台的默認包管理工具。通過NPM 可以安裝、共享、分發代碼,管理項目依賴關系。
- 可從NPM服務器下載別人編寫的第三方包到本地使用。
- 可從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
- 可將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
其實我們可以把 NPM 理解為前端的 Maven。我們通過 npm 可以很方便地安裝與下載 ,管理前端工程。
最新版本的 Node.js 已經集成了 npm 工具,所以必須首先在本機安裝 Node.js
Node.js 官網下載地址:
- 英文網:https://nodejs.org/en/download/
- 中文網:http://nodejs.cn/download/
裝完成后,查看當前 nodejs 與 npm 版本
- 查看node.js版本:node -v
- 查看npm版本:npm -v
1.2 NPM命令操作
1.2.1 NPM初始化
npm init 命令初始化項目:
新建一個 文件夾,通過命令提示符窗口進入到該文件夾,執行下面命令進行初始化項目
最后會生成package.json文件,這個是包的配置文件,相當於maven的pom.xml。可以根據需求修改。
1.2.2 安裝模塊
npm install 命令用於安裝某個模塊,安裝方式分為 :本地安裝(local)、全局安裝(global)兩種.
本地安裝
將 JS 庫安裝在當前執行命令時所在目錄下,安裝
舉例:安裝express模塊
如果出現黃色的是警告信息,可以忽略,請放心,你已經成功安裝了。
在該目錄下會出現一個 node_modules 文件夾 和 package-lock.json
node_modules 文件夾用於存放下載的js庫(相當於maven的本地倉庫)
package-lock.json 是在 npm install 時候生成一份文件。
用以記錄當前狀態下實際安裝的各個包的具體來源和版本號。
重新打開 package.json 文件,發現剛才下載的 jquery.js 已經添加到依賴列表中了.
關於模塊版本號表示方式:
指定版本號:比如 3.5.2,只安裝指定版本。遵循 “大版本.次要版本 小版本”的格式規定。
~波浪號 + 指定版本號:比如 ~3.5.2,安裝 3.5.x 的最新版本(不低於 3.5.2),但是不安裝 3.6.x,也
就是說安裝時不改變大版本號和次要版本號。
^ 插入號 + 指定版本號:比如 ^3.5.2,安裝 3.x 新版本(不低於 3.5.2),但是不安裝 4.x.x,也
就是說安裝時不改變大版本號。需要注意的是,如果 本號為0,則插入號的行為與波浪號相同,這是
因為此時處於開發階段,即使是次要版本號變動,也可能帶來 程序的不兼容。
latest:安裝最新版本。
全局安裝
將 JS 庫安裝到你的 全局目錄 下
使用全局安裝會將庫安裝到你的全局目錄下。
查看全局安裝目錄
如果你不知道你的全局目錄在哪里,執行命令:
如果安裝時出現如下錯誤:
npm err! Error: connect ECONNREFUS 27.0.0.1:8087
解決方法,執行如下命令:
npm config set proxy null
1.2.3 生產環境模塊
格式:
--save或 -S 參數意思是把模塊的版本信息保存 package.json 文件的 dependencies 字段中(生產環境依賴)
在 package.json 文件的 dependencies 字段中
1.2.4 生產環境模塊
格式:
--save-dev 或 -D 參數是把模塊版本信息保存到 package.json 文件的 devDep ncies 字段中(開發環境
依賴),所以開發階段一般使用它:
舉例:
安裝 eslint 模塊,它是語法格式校驗,只在開發環境依賴中即可
在 package.json 文件的 devDependencies 段中
1.3 批量下載模塊
我們從網上下載某些項目后,發現只有 package.json , 沒有 node_modules 文件夾,這時我們需要通過命令下載
這些js庫。
命令提示符進入 package.json 所在目錄,執行命令:
此時,npm 會自動下載 package.json 中依賴的js庫.
1.4 查看模塊命令
1.4.1查看本地已安裝模塊方式
方式1:可以安裝目錄 node_modules 下的查看包是否還存在
方式2:可以使用以下命令查看:
1.4.2查看模塊遠程最新版本
舉例:
1.4.3查看模塊遠程所有版本
npm view <Module Name> versions
舉例: 查看 jquery 模塊的所有版本
npm view jquery versions
1.5卸載模塊
卸載局部模塊
npm uninstall <Module Name>
卸載全局模塊
npm uninstall -g <Module Name>
1.6配置淘寶鏡像加速
1. 查看當前使用的鏡像地址
2. 配置淘寶鏡像地址
1.7安裝cnpm
1. 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 使用cnpm
cnpm install xxx