NPM使用方法

NET發表於2021-08-26
NPM

什麼是npm

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

安裝npm

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

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

npm install npm -g

npm映象

npm提供了官方的映象管理倉庫: 官方倉庫，如果我們要使用某個庫檔案，可以在這個網站上面進行查詢，然後使用npm進行安裝。

由於國內的網路環境，通常我們會設定淘寶的映象，設定方法：

npm config set registry https://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 webpack@5.50.0

從指定的源安裝包：

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

相關文章