npm设置同时从多个包源加载包的方法

目录
  • 一、搭建本地仓储
  • 二、创建npm包,并上传到私有仓储
  • 三、设置npm 安装包时从多个仓储源查找

随着前后端分离技术的发展成熟,越来越来越多的后台系统甚至前端系统采用前后端分离方式,在大型前后端分离系统中,前端往往包含大量的第三方js 包的引用,各个第三方包又可能依赖另外一个第三方包,因此急需要一个用于管理项目包之间的依赖关系的一个工具,此时npm就出现了,npm 通常随nodejs 安装的时候一起安装。

项目上经常会出现这么一种情况,就是有一些js包可能是公司内部封装的,而这些包又可能涉及到了一些私密信息,不能被上传到npm的公共仓储上去,那么此时一个好的办法就是将这些公司内部封装的js 包放到公司内部搭建的仓储上去,这样就可以保证安全性,通常我们可以通过安装 verdaccio来搭建公司内部的npm包仓储源,在搭建完毕后,我们将我们公司内部封装的js包上创到公司内部的私有仓储源中,然后再设置npm初始化加载包时从多个仓储源查找包,从而实现npm同时从多个仓储源加载包的功能。

一、搭建本地仓储

首先输入命令:

npm install -g verdaccio --save

来安装用于搭建私有npm包仓储的工具,注意:需要先安装nodejs才能执行此命令。

安装成功后,如下图所示:

安装成功后,如果是在windows 系统上,那么可以在%APPDATA%/Roaming/verdaccio 目录下找到verdaccio的配置文件:config.yaml,同时可以在命令行窗口中

输入verdaccio 命令来启动verdaccio,启动成功后,浏览器中输入:http://127.0.0.1:4873/ 可以看到如下效果:

因为目前我们还没有上传任何私有包到上面,因此显示空列表,下面讲解如何发布私有包到verdaccio.

二、创建npm包,并上传到私有仓储

首先我们创建一个测试的npm包,然后上传到私有仓储上去。

使用 npm init 命令来创建一个包。

创建成功后,我们打开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

因为我们在verdaccio 配置文件中指定的是发布和取消发布包需要登录,因此我们输入以下命令注册一个用户。

以上表示注册成功,并且已经登录,因为当前目录刚好处于@mylib/test包的package.json文件所在的目录,并且package.json文件中已经指定了该包要发布到的仓储地址,因此我们可以直接使用npm publish 命令发布@mylib/test包到私有仓储上去,发布成功后如下图所示:

三、设置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 文件

分别输入以下两条命令安装jquery 包 和 @mylib/test 包,其中jquery包时外部仓储源中加载的。

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

此时可以看到node_modules 中已经包含上面安装的这两个包

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 设置同时从多个包源加载包的方法的文章就介绍到这了,更多相关npm 设置同时从多个包源加载包的方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • npm配置国内镜像资源+淘宝镜像的方法

    npm介绍 1.说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等): 2.使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]: 2.1.<name>:node插件名称.例:npm install gulp-less --save-dev 2.2.-g:全局安装.将会安装在C:\Users\Administrator\AppData\Roaming\

  • npm设置同时从多个包源加载包的方法

    目录 一.搭建本地仓储 二.创建npm包,并上传到私有仓储 三.设置npm 安装包时从多个仓储源查找 随着前后端分离技术的发展成熟,越来越来越多的后台系统甚至前端系统采用前后端分离方式,在大型前后端分离系统中,前端往往包含大量的第三方js 包的引用,各个第三方包又可能依赖另外一个第三方包,因此急需要一个用于管理项目包之间的依赖关系的一个工具,此时npm就出现了,npm 通常随nodejs 安装的时候一起安装. 项目上经常会出现这么一种情况,就是有一些js包可能是公司内部封装的,而这些包又可能涉及

  • mybatis源码解读之executor包懒加载功能 

    ProxyFactory是创建代理类的工厂接口,其中的setProperties方法用来对工厂进行属性设置,但是mybatis内置的两个实现类都没有实现该接口,所以不支持属性设置.createProxy方法用来创建一个代理对象 public interface ProxyFactory {   // 设置工厂属性   default void setProperties(Properties properties) {   }   // 创建代理对象   Object createProxy(O

  • 解决python 虚拟环境删除包无法加载的问题

    项目开发一直在docker的虚拟环境上,遇到了一个问题,就是把虚拟环境的包删掉(rm -rf xxx)之后,再重新拷贝一个(跟原来包一模一样的文件夹)进去发现pycharm再也找不到这个包了,后来在同事的帮助下一步步的解决了这个问题: 解决流程: 1.定位问题 在虚拟环境下引入这个包: #进入虚拟环境 source bin/activate #1.进入python #2.引入报错的包 (xenwebsite-env)[root@aeb02c10de04 xenwebsite-env]# pyth

  • python动态加载包的方法小结

    本文实例总结了python动态加载包的方法.分享给大家供大家参考,具体如下: 动态加载模块有三种方法 1. 使用系统函数__import_() stringmodule = __import__('string') 2. 使用imp 模块 import imp stringmodule = imp.load_module('string',*imp.find_module('string')) imp.load_source("TYACMgrHandler_"+app.upper(),

  • IDEA设置maven修改settings.xml配置文件无法加载仓库的解决方案

    出处:https://www.cnblogs.com/SunSpring 作为初学者配置maven一般网上搜索.然后你就看到各种配置文件片段,首先配置镜像,然后配置仓库.完事后再IDEA里面配置下maven的路径和配置文件路径. 这些文章属实坑爹,完全没讲一个重要的配置就是activeProfiles. 当我配置了各种,捣腾了半天,idea里面死活加载不进去我配置的仓库信息. 最后配置好activeProfiles就行了,这个基本99%的文章都没讲过要配置,自己不仔细去看文档就会掉入陷阱. ac

  • Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)

    目录 一.问题描述及解决方案 1. 多入口存在的问题 2. 我的预期效果 3. 可行方案 二.方案一:打公共 chunks,单独分离各自的ui库 三.方案二:删除默认splitChunk配置,抽离公共资源 四.方案对比 总结 通常我们使用vue-cli开发多页面的时候,不知道您是否注意一个问题没有? 默认情况:webpack 会将多入口通用的组件库等,打包一个 vendor 的 chunk js 中 现在假设有两个页面: 入口 admin 使用到了element-ui组件库和echarts图表库

  • 详解springMVC容器加载源码分析

    springmvc是一个基于servlet容器的轻量灵活的mvc框架,在它整个请求过程中,为了能够灵活定制各种需求,所以提供了一系列的组件完成整个请求的映射,响应等等处理.这里我们来分析下springMVC的源码. 首先,spring提供了一个处理所有请求的servlet,这个servlet实现了servlet的接口,就是DispatcherServlet.把它配置在web.xml中,并且处理我们在整个mvc中需要处理的请求,一般如下配置: <servlet> <servlet-name

  • Flutter加载图片流程之ImageProvider源码示例解析

    目录 加载网络图片 ImageProvider resolve obtainKey resolveStreamForKey loadBuffer load(被废弃) evict 总结 困惑解答 加载网络图片 Image.network()是Flutter提供的一种从网络上加载图片的方法,它可以从指定的URL加载图片,并在加载完成后将其显示在应用程序中.本节内容,我们从源码出发,探讨下图片的加载流程. ImageProvider ImageProvider是Flutter中一个抽象类,它定义了一种

  • Visual studio 2017添加引用时报错未能正确加载ReferenceManagerPackage包的解决方法

    最近新装了2017,开始前几天还好,可是最近在添加引用时,报错 --------------------------- Microsoft Visual Studio --------------------------- 未能正确加载"ReferenceManagerPackage"包. 此问题可能是因配置更改或安装另一个扩展导致的.可通过查看文件"C:\Users\Administrator\AppData\Roaming\Microsoft\VisualStudio\1

  • Android编程动态加载布局实例详解【附demo源码】

    本文实例讲述了Android编程动态加载布局的方法.分享给大家供大家参考,具体如下: 由于前段时间项目需要,需要在一个页面上加载根据不同的按钮加载不同的布局页面,当时想到用 tabhot .不过美工提供的界面图完全用不上tabhot ,所以想到了动态加载的方法来解决这一需求.在这里我整理了一下,写了一个 DEMO 希望大家以后少走点弯路. 首先,我们先把界面的框架图画出来,示意图如下: 中间白色部门是一个线性布局文件,我喜欢在画图的时候用不同的颜色将一块布局标示出来,方便查看.布局文件代码如下:

随机推荐