快捷導(dǎo)航

npm設(shè)置同時(shí)從多個(gè)包源加載包的方法

更新時(shí)間：2021年09月14日 09:11:24 作者：chenxin.dm

本文主要介紹了npm 設(shè)置同時(shí)從多個(gè)包源加載包的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

隨著前后端分離技術(shù)的發(fā)展成熟，越來(lái)越來(lái)越多的后臺(tái)系統(tǒng)甚至前端系統(tǒng)采用前后端分離方式，在大型前后端分離系統(tǒng)中，前端往往包含大量的第三方j(luò)s 包的引用，各個(gè)第三方包又可能依賴另外一個(gè)第三方包，因此急需要一個(gè)用于管理項(xiàng)目包之間的依賴關(guān)系的一個(gè)工具，此時(shí)npm就出現(xiàn)了，npm 通常隨nodejs 安裝的時(shí)候一起安裝。

項(xiàng)目上經(jīng)常會(huì)出現(xiàn)這么一種情況，就是有一些js包可能是公司內(nèi)部封裝的，而這些包又可能涉及到了一些私密信息，不能被上傳到npm的公共倉(cāng)儲(chǔ)上去，那么此時(shí)一個(gè)好的辦法就是將這些公司內(nèi)部封裝的js 包放到公司內(nèi)部搭建的倉(cāng)儲(chǔ)上去，這樣就可以保證安全性，通常我們可以通過(guò)安裝 verdaccio來(lái)搭建公司內(nèi)部的npm包倉(cāng)儲(chǔ)源，在搭建完畢后，我們將我們公司內(nèi)部封裝的js包上創(chuàng)到公司內(nèi)部的私有倉(cāng)儲(chǔ)源中，然后再設(shè)置npm初始化加載包時(shí)從多個(gè)倉(cāng)儲(chǔ)源查找包，從而實(shí)現(xiàn)npm同時(shí)從多個(gè)倉(cāng)儲(chǔ)源加載包的功能。

一、搭建本地倉(cāng)儲(chǔ)

首先輸入命令：

npm install -g verdaccio --save

來(lái)安裝用于搭建私有npm包倉(cāng)儲(chǔ)的工具,注意：需要先安裝nodejs才能執(zhí)行此命令。

安裝成功后，如下圖所示：

安裝成功后，如果是在windows 系統(tǒng)上，那么可以在%APPDATA%/Roaming/verdaccio 目錄下找到verdaccio的配置文件：config.yaml，同時(shí)可以在命令行窗口中

輸入verdaccio 命令來(lái)啟動(dòng)verdaccio,啟動(dòng)成功后，瀏覽器中輸入：http://127.0.0.1:4873/ 可以看到如下效果：

因?yàn)槟壳拔覀冞€沒(méi)有上傳任何私有包到上面，因此顯示空列表，下面講解如何發(fā)布私有包到verdaccio.

二、創(chuàng)建npm包，并上傳到私有倉(cāng)儲(chǔ)

首先我們創(chuàng)建一個(gè)測(cè)試的npm包，然后上傳到私有倉(cāng)儲(chǔ)上去。

使用 npm init 命令來(lái)創(chuàng)建一個(gè)包。

創(chuàng)建成功后，我們打開(kāi)Test目錄，我們可以看到生成了一個(gè)package.json的文件，打開(kāi)新增publishConfig節(jié)點(diǎn)，表示將此包發(fā)布到http://127.0.0.1:4873這個(gè)地址：

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

在package.json所在目錄下新建index.js 文件，因?yàn)樯厦娴膍ain屬性中指定的是index.js作為包的入口執(zhí)行文件，因此名稱必須命名為：index.js

因?yàn)槲覀冊(cè)趘erdaccio 配置文件中指定的是發(fā)布和取消發(fā)布包需要登錄，因此我們輸入以下命令注冊(cè)一個(gè)用戶。

以上表示注冊(cè)成功，并且已經(jīng)登錄，因?yàn)楫?dāng)前目錄剛好處于@mylib/test包的package.json文件所在的目錄，并且package.json文件中已經(jīng)指定了該包要發(fā)布到的倉(cāng)儲(chǔ)地址，因此我們可以直接使用npm publish 命令發(fā)布@mylib/test包到私有倉(cāng)儲(chǔ)上去,發(fā)布成功后如下圖所示：

三、設(shè)置npm 安裝包時(shí)從多個(gè)倉(cāng)儲(chǔ)源查找

通過(guò)輸入命令：

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

以上命令告訴npm ，當(dāng)遇到包名為@mylib開(kāi)頭的包時(shí)全部從http://127.0.0.1:4873這個(gè)地址加載。

四、測(cè)試npm是否能同時(shí)從多個(gè)倉(cāng)儲(chǔ)源加載包

輸入命令：npm init 創(chuàng)建一個(gè)項(xiàng)目的package.json 文件

分別輸入以下兩條命令安裝jquery 包和 @mylib/test 包，其中jquery包時(shí)外部倉(cāng)儲(chǔ)源中加載的。

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

此時(shí)可以看到node_modules 中已經(jīng)包含上面安裝的這兩個(gè)包

package.json 中也包含了以上兩個(gè)包的依賴

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "測(cè)試項(xiàng)目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "測(cè)試"
  ],
  "author": "chenxin",
  "license": "ISC",
  "dependencies": {
    "@mylib/test": "^1.0.0",
    "jquery": "^3.6.0"
  }
}

這個(gè)時(shí)候，我們?cè)賱h除：node_modules 目錄，然后命令行輸入(該命令要在package.json所在目錄下執(zhí)行):

npm init

觀察node_modules 目錄是否重新生成，并且包含package.json中包含的兩個(gè)包，如果都包含，則表示npm 已經(jīng)同時(shí)支持從多個(gè)倉(cāng)儲(chǔ)源加載包了

到此這篇關(guān)于npm 設(shè)置同時(shí)從多個(gè)包源加載包的方法的文章就介紹到這了,更多相關(guān)npm 設(shè)置同時(shí)從多個(gè)包源加載包的方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: