npm 設定同時從多個包源載入包的方法

chenxin.dm發表於2021-09-13

      隨著前後端分離技術的發展成熟,越來越來越多的後臺系統甚至前端系統採用前後端分離方式,在大型前後端分離系統中,前端往往包含大量的第三方js 包的引用,各個第三方包又可能依賴另外一個第三方包,因此急需要一個用於管理專案包之間的依賴關係的一個工具,此時npm就出現了,npm 通常隨nodejs 安裝的時候一起安裝。

     專案上經常會出現這麼一種情況,就是有一些js包可能是公司內部封裝的,而這些包又可能涉及到了一些私密資訊,不能被上傳到npm的公共倉儲上去,那麼此時一個好的辦法就是將這些公司內部封裝的js 包放到公司內部搭建的倉儲上去,這樣就可以保證安全性,通常我們可以通過安裝 verdaccio 來搭建公司內部的npm包倉儲源,在搭建完畢後,我們將我們公司內部封裝的js包上創到公司內部的私有倉儲源中,然後再設定npm初始化載入包時從多個倉儲源查詢包,從而實現npm同時從多個倉儲源載入包的功能。

 

一、搭建本地倉儲

首先輸入命令:

npm install -g verdaccio --save

來安裝用於搭建私有npm包倉儲的工具,注意:需要先安裝nodejs才能執行此命令。

安裝成功後,如下圖所示:

npm 設定同時從多個包源載入包的方法

安裝成功後,如果是在windows 系統上,那麼可以在%APPDATA%/Roaming/verdaccio 目錄下找到verdaccio的配置檔案:config.yaml,同時可以在命令列視窗中

輸入verdaccio 命令來啟動verdaccio,啟動成功後,瀏覽器中輸入:http://127.0.0.1:4873/ 可以看到如下效果:

npm 設定同時從多個包源載入包的方法

因為目前我們還沒有上傳任何私有包到上面,因此顯示空列表,下面講解如何釋出私有包到verdaccio.

 

二、建立npm包,並上傳到私有倉儲

首先我們建立一個測試的npm包,然後上傳到私有倉儲上去。

使用 npm init 命令來建立一個包。

npm 設定同時從多個包源載入包的方法

建立成功後,我們開啟Test目錄,我們可以看到生成了一個package.json的檔案,開啟新增publishConfig節點,表示將此包釋出到http://127.0.0.1:4873這個地址:

{
  "name": "@mylib/test",
  "version": "1.0.0",
  "description": "npm 本地包",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "測試"
  ],
  "author": "chenxin",
  "license": "ISC",
  "publishConfig": {
    "registry": "http://127.0.0.1:4873"
  }
}

 

在package.json所在目錄下新建index.js 檔案,因為上面的main屬性中指定的是index.js作為包的入口執行檔案,因此名稱必須命名為:index.js

npm 設定同時從多個包源載入包的方法

因為我們在verdaccio 配置檔案中指定的是釋出和取消釋出包需要登入,因此我們輸入以下命令註冊一個使用者。

npm 設定同時從多個包源載入包的方法

以上表示註冊成功,並且已經登入,因為當前目錄剛好處於@mylib/test包的package.json檔案所在的目錄,並且package.json檔案中已經指定了該包要釋出到的倉儲地址,因此我們可以直接使用npm publish 命令釋出@mylib/test包到私有倉儲上去,釋出成功後如下圖所示:

npm 設定同時從多個包源載入包的方法

npm 設定同時從多個包源載入包的方法

 

三、設定npm 安裝包時從多個倉儲源查詢

通過輸入命令:

npm config set @mylib:registry=http://127.0.0.1:4873

以上命令告訴npm ,當遇到包名為@mylib開頭的包時全部從http://127.0.0.1:4873這個地址載入。

 

四、測試npm是否能同時從多個倉儲源載入包

輸入命令:npm init 建立一個專案的package.json 檔案

npm 設定同時從多個包源載入包的方法

 

分別輸入以下兩條命令安裝jquery 包 和 @mylib/test 包,其中jquery包時外部倉儲源中載入的。

npm install jquery --save
npm install @mylib/test --save

npm 設定同時從多個包源載入包的方法

此時可以看到node_modules 中已經包含上面安裝的這兩個包

 

npm 設定同時從多個包源載入包的方法

 

package.json 中也包含了以上兩個包的依賴

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "測試專案",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "測試"
  ],
  "author": "chenxin",
  "license": "ISC",
  "dependencies": {
    "@mylib/test": "^1.0.0",
    "jquery": "^3.6.0"
  }
}

 

這個時候,我們再刪除:node_modules 目錄,然後命令列輸入(該命令要在package.json所在目錄下執行): 

npm init

觀察node_modules 目錄是否重新生成,並且包含package.json中包含的兩個包,如果都包含,則表示npm 已經同時支援從多個倉儲源載入包了

npm 設定同時從多個包源載入包的方法

相關文章