NPM使用方法

2021 年 8 月 26 日
筆記
Web前端, 大前端

什麼是npm

npm是nodejs的包管理器，在當今工程化前端開發過程中，npm包起著舉足輕重的作用。

安裝npm

作為nodejs的包管理器，npm隨著nodejs一起安裝的。通常情況下，當我們安裝完成nodejs以後，npm也就隨之安裝了。

如果要更新npm，可以使用如下命令：

npm install npm -g

npm鏡像

npm提供了官方的鏡像管理倉庫: 官方倉庫，如果我們要使用某個庫文件，可以在這個網站上面進行查找，然後使用npm進行安裝。

由於中國的網路環境，通常我們會設置淘寶的鏡像，設置方法：

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

要查看設置了哪些參數，使用命令：

npm config ls

從中可以看到配置文件的地址：C:\Users\Administrator\.npmrc

使用npm安裝包

初始化配置文件

在使用npm之前，要先初始化npm的配置文件，使用如下命令：

npm init

這個時候會出現一個初始化的引導命令行，讓你輸入項目名稱、版本號、作者、協議等，如果你覺得這些輸入起來麻煩，可以添加參數來使用默認值：

npm init --yes

使用以上命令，會在當前目錄生成package.json。下面是這個默認配置文件的注釋：

{
  "name": "demo1",      //名稱
  "version": "1.0.0",   //版本號
  "description": "",    //描述
  "main": "index.js",   //入口文件
  "scripts": {          //腳本，key-value格式，可以使用 npm run xxx
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],       //關鍵字
  "author": "",         //作者
  "license": "ISC"      //協議
}

包版本號

npm包的版本命名格式為: major.minor.patch

major: 主版本號，新的架構調整，不兼容老版本
minor: 次版本號，新增功能，兼容老版本
patch: 修補版本號，修復bug，兼容老版本

當我們安裝一個包之後，可以看到包名的前面有一些符號，例如 ^、~等，這些符號決定了當前項目依賴的包的版本號如何選擇

沒有符號，例如1.2.5，表示必須依賴1.2.5版
~：大概匹配某個版本，如果minor版本號指定了，那麼minor版本號不變，而patch版本號任意，如果minor和patch版本號未指定，那麼minor和patch版本號任意。

例如：

如：~1.1.2，表示>=1.1.2 <1.2.0，可以是1.1.2，1.1.3，1.1.4，.....，1.1.n 
如：~1.1，表示>=1.1.0 <1.2.0，可以是同上
如：~1，表示>=1.0.0 <2.0.0，可以是1.0.0，1.0.1，1.0.2，.....，1.0.n，1.1.n，1.2.n，.....，1.n.n

^：兼容某個版本，版本號中最左邊的非0數字的右側可以任意，如果缺少某個版本號，則這個版本號的位置可以任意
例如：

如：^1.1.2 ，表示>=1.1.2 <2.0.0，可以是1.1.2，1.1.3，.....，1.1.n，1.2.n，.....，1.n.n
如：^0.2.3 ，表示>=0.2.3 <0.3.0，可以是0.2.3，0.2.4，.....，0.2.n
如：^0.0，表示 >=0.0.0 <0.1.0，可以是0.0.0，0.0.1，.....，0.0.n

其它的一些寫法：

>：必須大於某個版本，如：>1.1.2，表示必須大於1.1.2版
>=：可大於或等於某個版本，如：>=1.1.2，表示可以等於1.1.2，也可以大於1.1.2版本
<：必須小於某個版本，如：<1.1.2，表示必須小於1.1.2版本
<=：可以小於或等於某個版本，如：<=1.1.2，表示可以等於1.1.2，也可以小於1.1.2版本
x-range：x的位置表示任意版本，如：1.2.x，表示可以1.2.0，1.2.1，…..，1.2.n
*-range：任意版本，””也表示任意版本，如：*，表示>=0.0.0的任意版本
version1 - version2：大於等於version1，小於等於version2，如：1.1.2 – 1.3.1，表示包括1.1.2和1.3.1以及他們件的任意版本
range1 || range2：滿足range1或者滿足range2，可以多個範圍，如：<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 ❤️.0.0，表示滿足這3個範圍的版本都可以

scripts

scripts節點下配置的是可以運行的腳本。例如在默認配置中的test腳本，我們可以通過下面的命令來調用：

npm run test

如果我們要添加其它腳本，可以在scripts節點添加鍵值對：

"scripts": {          //腳本，key-value格式，可以使用 npm run xxx
    "test": "echo \"Error: no test specified\" && exit 1",
    "dir": "dir"    //windows下顯示當前目錄文件列表
}

然後使用npm來運行該腳本：

npm run dir

這裡只是為了演示scripts腳本的用法，它的作用是為了減輕我們在開發時的重複工作。再舉個例子，例如使用webpack打包，可以使用命令npx webpack --mode=production，如果我們每次都使用完整的命令，會顯得很繁瑣，此時我們可以定義一個腳本來簡化操作：

"scripts": {          //腳本，key-value格式，可以使用 npm run xxx
    "test": "echo \"Error: no test specified\" && exit 1",
    "dir": "dir",    //windows下顯示當前目錄文件列表
    "build": "npx webpack --mode=production"
}

在我們開發的時候，直接使用npm run build命令即可。

dependencies 和 devDependencies

顧名思義，dependencies 是依賴的包，devDependencies 是開發時依賴的包。例如我們項目中用到了jQuery，很顯然這是項目運行時需要的，那麼在添加包時，使用如下命令進行安裝：

npm install jquery

而對於webpack等在開發時用於構建項目的包，我們僅在開發時用到，項目運行時不會使用，因此需要把它們添加到開發依賴中，添加方法如下：

npm install webpack --save-dev

# --save-dev 可以簡寫為 -D，簡化後的命令如下：
npm install webpack -D

package.lock.json

我們在安裝包時，可以看到它的版本依賴，默認是兼容大版本即可。此時會出現一個問題，就是在不同的用戶電腦中，初始化的包的版本可能會出現不一樣的情況，從而造成未可知的bug。為了解決這個問題（這也是yarn誕生的一個原因），npm在5.0之後引入了package.lock.json文件，用來固定包的版本、包的源地址等資訊，保證在不同的用戶開發環境中載入的是相同的包。

當用戶使用npm install命令來安裝我們的依賴項時，會從package.lock.json文件中進行安裝。官方文檔：package.lock.json

安裝包

當我們從別人的源程式碼初始化安裝所有依賴的包時，使用如下命令：

npm install

當我們為項目添加新的包時，使用如下命令：

# 安裝包
npm install webpack --save

# 上面命令的參數 --save 為默認選項，可以忽略，因此可以簡化為：
npm install webpack

# 全局安裝
npm install webpack -g

# 安裝到開發依賴
npm install webpack -g --save-dev

# 上面這行命令還可以簡寫為下面這一行
npm i webpackage -g -D

安裝特定版本的包：

npm install [email protected]

從指定的源安裝包：

npm install -g cnpm --registry=//registry.npm.taobao.org

Tags: Web前端大前端