天天看點

NPM包管理工具

NPM包管理工具

NPM全程是Node Package Manager,他是JavaScript的包管理工具,是Node.js平台預設的包管理工具,通過NPM可以安裝、共享、分發代碼、管理項目依賴關系。

  • 可以從NPM伺服器下載下傳别人編寫的第三方包到本地。
  • 可以從NPM伺服器下載下傳并安裝别人編寫的指令行程式到本地使用。
  • 可以自己編寫的包或者指令行上傳到NPM伺服器供别人使用。

可以吧NPM了解為前端的Maven,通過NPM很友善的下載下傳使用js庫,管理前端工程。

最新版的Node.js已經繼承了npm,是以首先安裝Node環境就可以了。

NPM英文網:​​https://nodejs.org/en/​​​

NPM中文網:​​http://nodejs.cn/​​

NPM包管理工具

安裝完成後檢驗是否安裝成功:

node -v

npm -v      
NPM包管理工具

NPM 初始化

初始化項目

npm init      
NPM包管理工具

輸入名稱:名稱不能包含大寫字母,如:studyDemo是不允許的,如果有大寫,可以設定為study-demo,

如果不輸入直接回車,則以括号中的名稱做為預設名字。

NPM包管理工具

版本号:版本号,如果不輸入也是以小括号中的版本号為預設。

NPM包管理工具

描述:輸入一個描述,随便來了。

NPM包管理工具

入口檔案:運作一個程式都有一個入口,設定之後,我們的js項目就是從這個檔案裡面運作,有人可以設定一個新的,但是我們用預設的就可以了。

NPM包管理工具

測試指令:不用輸入,直接回車就可以了。

NPM包管理工具

git 倉庫位址,也不需要,直接回車就行了。

NPM包管理工具

關鍵字、作者、秘鑰認證都不需要,直接忽略就可以了。

NPM包管理工具

接下來他會根據我們設定的在studyDemo檔案夾下建立一個package.json檔案,内容如上圖,點選回車辨別确認,即OK,不确認的話我們就得設定一個no然後回車。

NPM包管理工具

然後檔案夾下就有了剛剛建立好的package.json檔案。打開看一下:

NPM包管理工具

如果嫌麻煩,可以采用以下指令初始化npm,這樣的話他不會提示你填寫各種資訊,而是全部采用磨人的方式建立。

npm init -y      
NPM包管理工具

這樣子的話就簡化了一系列的操作。

NPM子產品的安裝

安裝方式

npm install 指令用于安裝某個子產品,安裝方式分為本地安裝和全局安裝兩部分。

  • 本地安裝

    将JS庫安裝在目前實行指令時所在的目錄下

npm install <module name>[@版本号]      
  • 全局安裝

    将JS庫安裝到你的全局目錄下

npm install <module name>[@版本号] -g      

如果安裝出現一下錯誤:

npm err! Error:connect ECONNREFUSED 127.0.0.1:8087      

解決辦法:

npm config set proxy null      

本地安裝

本地安裝會将js庫存放在目前目錄下

安裝最新版 express 子產品,他是基于node.js平台的web開發架構,執行指令如下:

npm install express      

出現黃色的不用擔心是警告。

NPM包管理工具

在該目錄下出現一個 node_modules 檔案夾和一個 package-lock.json 檔案。

node_modules 檔案夾用于存放下載下傳的js庫(相當于maven的本地倉庫)。

package-lock.json 是在 npm install 的時候生成的一份檔案,記錄的是目前狀态下實際安裝的各個包的具體來源和版本号。

重新打開 package.json 檔案,發現剛才下載下傳的檔案已經添加到依賴清單中了。

NPM包管理工具
子產品版本号顯示方式:
  • 指定版本号:比如“3.5.2”,隻安裝指定版本,遵循“大版本,次要版本、小版本”的格式規定。
  • ~ 波浪号+指定版本:比如“~3.5.2”,安裝3.5.x的最新版本,不低于3.5.2,但是不安裝3.6.x,也就是說,安裝時不改變大版本号和次要版本号。
  • ^ 插入号+指定版本号:比如 ^3.5.2:安裝3.x.x,安裝3.x.x的最新版本号,但不安裝4.x.x,也就是說安裝的時候不改變大版本号。需要注意的四,如果大版本号為0,則插入号的行為與波浪号相同,這是因為此時處于開發階段,即使是次要版本的變動,也可能帶來不相容。
  • latest:安裝最新版本。

指定版本安裝

安裝jquery2.2.0版本,注意,2.2.0版本必須存在,不然會安裝失敗。

npm install [email protected]      
NPM包管理工具
NPM包管理工具

安裝成功!

全局安裝

使用全局安裝會安裝到全局目錄下。

檢視全局安裝目錄:

npm root -g      
NPM包管理工具

比如在全局安裝一個 vue。

npm install vue -g      
NPM包管理工具

修改全局目錄:

npm config set prefix "d:\npm"

npm root -g      

很多項目都用到或者是經常用的時候,就是用全局安裝。如果是某個項目特定的使用,其他項目一般用不到的時候就使用本地安裝。

檢視全局安裝的子產品

npm list -g      

生産環境模闆安裝

格式:--save 或者 -S ,參數的意思是把子產品的版本資訊儲存在package.json檔案的 dependencies 字段中(生産環境依賴)。

npm install <Model Name> [--save|-S]      

如果不寫 --save 或 -S 預設也是安裝到生産環境當中。

例如在生産環境安裝vue。

NPM包管理工具

安裝成功:

NPM包管理工具

開發環境模闆安裝

格式:--save-dev 或 -D 參數是把子產品的版本資訊儲存到 package.json 檔案的 devDependencies 字段中(開發環境依賴),是以開發階段一般使用它:

npm install <Module Name> [--save-dev | -D]      

例如 開發環境安裝 eslint

npm install eslint -D      
NPM包管理工具
NPM包管理工具

批量下載下傳子產品

從網上下載下傳的項目大多隻有 package.json ,沒有 node_modules 檔案夾時,就要使用指令下載下傳這些沒有的js庫。

進入指令提示符,package.json所在的目錄,執行以下指令,完成批量下載下傳:

npm install      

此時,npm 就會自動下載下傳 package.json 中所依賴的庫。

檢視子產品指令

  1. 可以進入安裝目錄 node_modules 下檢視是都有包。
  2. 使用指令檢視。
# 檢視本地安裝的所有子產品
npm list

npm ls

# 檢視指定子產品
npm list <Model Name>      

檢視子產品遠端最新版本

格式:

npm view <Module Name> version      

例如:檢視jquery子產品的最新版本。

npm view jquery version      
NPM包管理工具

檢視jquery遠端所有版本資訊。

npm view jquery versions      
NPM包管理工具

解除安裝子產品

解除安裝局部子產品

npm uninstall <Module Name>      

解除安裝全局子產品

npm uninstall -g <Module Name>      

配置淘寶鏡像加速

檢視目前使用的鏡像位址:

npm get registry      
NPM包管理工具

配置淘寶鏡像位址:

npm config set registry https://registry.npm.taobao.org      

還原預設的鏡像位址:

npm config set registry https://registry.npmjs.org/      

【版權聲明】本博文著作權歸作者所有,任何形式的轉載都請聯系作者擷取授權并注明出處!

【重要說明】本文為本人的學習記錄,論點和觀點僅代表個人而不代表當時技術的真理,目的是自我學習和有幸成為可以向他人分享的經驗,是以有錯誤會虛心接受改正,但不代表此刻博文無誤!