nodejs入門之npm包資源管理器

一. 前言

1.npm是什麼

官網：https://www.npmjs.cn/

npm是JavaScript的包管理器，也是世界上最大的軟件註冊中心。

NPM是隨同NodeJS一起安裝的包管理工具，包的結構使您能夠輕鬆跟蹤依賴項和版本。

NPM能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：
允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

2.爲什麼需要它

​ 現代化前端開發中，需要用到很多別人寫好的模塊包。如果我們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用的話非常繁瑣。於是一個集中管理的工具應運而生。大家都把自己開發的模塊打包後放到npm官網上，如果要使用，直接通過npm安裝就可以直接用，不用管代碼存在哪裏，應該從哪裏下載。
​ 更重要的是，如果我們要使用模塊A，而模塊A又依賴於模塊B，模塊B又依賴於模塊X和模塊Y，npm可以根據依賴關係，把所有依賴的包都下載下來並管理起來。否則，靠我們自己手動管理，肯定既麻煩又容易出錯。

3.怎麼用

在安裝了 node 之後，就可以使用 npm 命令了。

二.常用命令

1.初始化

在當前目錄中生成package.json 文件(項目描述文件)

$ 沒有別的意思,代表這些代碼是終端運行的

$ npm init   
$ npm init -y

二者都可以初始化生成package.json配置文件

npm init 會有很多提問讓你輸入當前配置項

npm init -y 直接跳過所有提問,生成默認的配置項

2.安裝生產環境依賴包

生產依賴包指的是不管在開發時還是上線之後項目都需要使用到的。比如 jQuery、bootstrap、lodash 等。

//默認安裝最新版本
$ npm install 包名

//安裝指定版本 version版本,比如 npm install [email protected]
$ npm install 包名@ <version>

//安裝指定的tag版本
$ npm install 包名@ <tag>

• npm install 可以簡寫成npm i
• 會寫入到package.json 文件中的dependencies配置中.以前需要加 --save 或 -s參數.現在不需要了.

3.安裝開發依賴包

開發依賴包指的是僅在開發過程中需要使用到的。比如 gulp、webpack、nodemon 等工具類型的依賴包。

  //默認安裝最新版本
  $ npm install 包名 --save-dev
  //安裝指定的版本
  $ npm install 包名@<version>  --save-dev
  //安裝指定的tag版本
  $ npm install 包名@<version>  --save-dev 

• –save-dev 可以簡寫成 -D
• 會寫入到package.json文件中的devDependencies配置中

4.更新依賴包

	//更新全部依賴包
	$ npm update

	//更新指定的依賴包
	$ npm update 包名

來舉個栗子.

$ npm i gulp@3.9.1 -D

注意:更新依賴包時會根據 package.json 文件中依賴包的前綴符號做不同處理**

這裏我們安裝了[email protected]的版本,然後使用npm update 更新依賴包,發現了一個問題,我們目前的gulp版本應該是4.0.2的版本,爲什麼沒有升級呢?

先了解下版本號的小知識

x.y.z

• x - 主版本，如果代碼有一些不向下兼容的更新時，就需要對 x 做 + 1
• y - 次版本，如果代碼有一些向下兼容的新功能或修改功能的話，就需要對 y 做 + 1
• z - 修訂版本，如果代碼有一些bug修復之類的，就對 z 做 + 1

來個問題,當前gulp3.x的最新版本是3.9.1 ,如果我們安裝的是3.8.x,然後npm update gulp 時,能更新嗎?
答案是:能

還有個問題:package.json中的依賴包版本號前面有個^和~代表什麼意思?
兩者的相同點,都是爲了處理如何更新的問題
區別是:
^ 鎖定主版本,更新到最新的次版本+修訂版
^ 3.8.11 => 3.9.1
~ 鎖定主版本與次版本,更新到最新的修訂版
~ 3.8.0 => 3.8.11

另外,除版本號之外還有些修飾的詞,我們在使用軟件中也經常見到

除了版本號之外還有一些修飾的詞，比如：

1. alpha：內部版本
2. beta：測試版本
3. rc：即將作爲正式版發佈
4. lts：長期維護版本

通過版本號小知識,我們就可以知道,爲什麼上面gulp版本沒有升級到4.0.2的版本了,因爲更新版本是不會更新到主版本 的,因爲4.x的版本之後,做了不向下兼容的更新,擔心當前項目相關的gulp,跑不起來,npm也怕這種情況發生,就對我們的版本做了鎖定,所以更新不了.

5.安裝項目全部依賴

項目的依賴包是存放在項目的 node_modules 文件夾中的，項目依賴多的時候，這個文件夾會非常大。版本管理時都會忽略這個文件夾。
項目克隆下來之後，如果按照 package.json 中的依賴項一個一個手動去安裝，將非常費時費力。
這時可以直接使用 npm install 命令。它會依據 package.json 將全部依賴都安裝好。

$ npm install

6.全局安裝

全局一般安裝的是一些工具類型的。比如 nodemon、live-server、gulp、webpack、@vue/cli、create-react-app 等

$ npm install 包名  -global  

可以縮寫爲 npm i 包名 -g

• 1.全局安裝的工具包,存放在哪裏?
  C:\Users\xxx用戶\AppData\Roaming\npm
• 2.有些時候，可能會出現命令缺失的問題
  比如報 "nodemon"不是內部或外部命令這類錯誤

可以這樣解決:

• a.去全局安裝的工具包目錄下查找是否的確有 nodemon
• b.查看系統環境變量是否將 工具包目錄 添加到了 path 配置中。（！不要隨意去亂改 ！）
• c.重新打開個終端，再試試。

7.卸載包

//卸載當前項目下的
$ npm uninstall 包名
//卸載全局的
$ npm uninstall 包名 -g

8.清除緩存數據

//如果報錯-4048時使用
$ npm cache verify

三,npm換源

下載第三方依賴包時默認是從國外的服務器下載的。由於種種原因，下載的速度不盡如意。
這時可以採用淘寶的鏡像源。

1.查詢npm源地址

$ npm config get registry

2.修改npm 源地址

$ npm config set registry  源地址

*. 淘寶鏡像源地址：https://registry.npm.taobao.org/
*. 默認源地址：https://registry.npmjs.org/

3.npm 源的配置文件地址在哪裏

C:\Users\xx用戶.npmrc

四. npm script(npm腳本)

有時候我們需要通過各種命令來啓動項目或者做其他的事情,比如說:

• node index.js
• gulp
  上面這兩個命令還是比較簡單容易記憶,但是如果是這個命令呢

nodemon index.js --hello --world --abc --ejg (隨意寫的長命令,舉個栗子而已)

如果我們每次啓動,去在終端寫這樣的命令,肯定是不明智的,這時就可以使用npm腳本

npm腳本,就是將一些命令寫入到腳本中,後續運行腳本就好了,腳本記憶起來是非常簡單的也是可以直接去找到的腳本代碼

npm腳本是寫在 package.json文件中的script字段中

{
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello":"node index.js"
  }
}

script中每個鍵值對就是一個腳本命令,key是腳本名,value是這個腳本的操作

運行腳本,使用npm run 腳本名 來運行即可

有個特殊的腳本 start,如果腳本名是start,那麼可以不加run 直接npm start 即可

上面所有介紹的是npm包資源管理器的基礎操作,下面總結下命令:

生成 package.json 配置文件
$ npm init

$ npm init -y  跳過所有提問

安裝包

本地安裝（當前項目能訪問到）
$ npm install 包名

全局安裝（其他項目都能訪問到）
$ npm install 包名 -global

縮寫形式
$ npm i 包名 -g

項目依賴（添加到dependencies）
$ npm install 包名 -save
項目上線需要用到的包，縮寫 $ npm install 包名 -S (大寫)

開發依賴（添加到devDependencies）
$ npm install 包名 --save-dev
開發測試需要用到的包，縮寫 $ npm install 包名 -D (大寫)

移除依賴模塊
$ npm uninstall 包名 -save
$ npm uninstall 包名 --save-dev

清除緩存數據
npm cache verify
如報錯 -4048 時使用

淘寶 NPM 鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm install 包名 -D (大寫)

移除依賴模塊
$ npm uninstall 包名 -save
$ npm uninstall 包名 --save-dev

清除緩存數據
npm cache verify
如報錯 -4048 時使用

淘寶 NPM 鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org