【前端工程化】Verdaccio搭建本地npm仓库

news2024/11/16 23:52:21

背景

Verdaccio 是一个 Node.js创建的轻量的私有npm proxy registry

我们在开发npm包的时候,经常需要验证发包流程,或者开发的npm包仅局限于公司内部使用时,就可以借助Verdaccio搭建一个npm仓库,搭建完之后,只要更改npm install的源地址,指向该仓库地址,就可以实现上述提出的两个功能。

# 例如
npm set registry http://localhost:4873

# 或者
npm install lodash --registry http://localhost:4873

实践

# 全局安装
npm i verdaccio -g

# 运行
verdaccio

# 这时候会打印出verdaccio安装的位置信息
# 比如 
# info --- config file  - \verdaccio\config.yaml
# info --- using htpasswd file: \verdaccio\htpasswd
# info --- plugin successfully loaded: verdaccio-htpasswd
# info --- plugin successfully loaded: verdaccio-audit
# warn --- http address - http://localhost:4873/ - verdaccio/5.25.0

打开http://localhost:4873/:

在这里插入图片描述

  • verdaccio\config.yaml 是仓库的配置文件
  • verdaccio\htpasswd 当用户注册之后,会记录用户信息
  • storage所有上传的包都会保存在这里~

关于verdaccio\config.yaml这里说几个比较常用的配置项:

# 设置用户上传包的存放目录
storage: ./storage
#  插件目录
plugins: ./plugins

# 前端页面的配置,可以设置如下参数,详见https://verdaccio.org/docs/webui
web:
  title: Verdaccio
  # comment out to disable gravatar support
  # gravatar: false
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc
  # convert your UI to the dark side
  # darkMode: true
  # html_cache: true
  # by default all features are displayed
  # login: true
  # showInfo: true
  # showSettings: true
  # In combination with darkMode you can force specific theme
  # showThemeSwitch: true
  # showFooter: true
  # showSearch: true
  # showRaw: true
  # showDownloadTarball: true
  #  HTML tags injected after manifest <scripts/>
  # scriptsBodyAfter:
  #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
  #  HTML tags injected before ends </head>
  #  metaScripts:
  #    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
  #    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
  #    - '<meta name="robots" content="noindex" />'
  #  HTML tags injected first child at <body/>
  #  bodyBefore:
  #    - '<div id="myId">html before webpack scripts</div>'
  #  Public path for template manifest scripts (only manifest)
  #  publicPath: http://somedomain.org/

# 设置账号相关的内容 https://verdaccio.org/docs/configuration#authentication
auth:
  htpasswd:
    file: ./htpasswd
    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    # max_users: 1000
    # Hash algorithm, possible options are: "bcrypt", "md5", "sha1", "crypt".
    # algorithm: bcrypt # by default is crypt, but is recommended use bcrypt for new installations
    # Rounds number for "bcrypt", will be ignored for other algorithms.
    # rounds: 10
    
#  设置上游匹配,主要用于包匹配不到时,系统该往哪里去找这个包
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

# packages 包相关配置,用于设置包的上传、下载、访问的权限控制
# https://verdaccio.org/docs/protect-your-dependencies/
# https://verdaccio.org/docs/configuration#packages
packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    # $all 所有登录、未登录者都可以访问
    # $authenticated 只有登录者可以访问
    # $anonymous 未登录可以访问
    # a、b、v等 指定用户名、只有该用户可以访问
    access: $all

    # 发布权和取消发布权
    publish: $authenticated
    unpublish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

# 服务器的相关配置
server:
  keepAliveTimeout: 60
  # Allow `req.ip` to resolve properly when Verdaccio is behind a proxy or load-balancer
  # See: https://expressjs.com/en/guide/behind-proxies.html
  # trustProxy: '127.0.0.1'

# 端口号配置
# listen:
# - localhost:4873            # default value
# - http://localhost:4873     # same thing
# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
# - https://example.org:4873  # if you want to use https
# - "[::1]:4873"                # ipv6
# - unix:/tmp/verdaccio.sock    # unix socket

# https的配置
# https://verdaccio.org/docs/configuration#https
# https:
#   key: ./path/verdaccio-key.pem
#   cert: ./path/verdaccio-cert.pem
#   ca: ./path/verdaccio-csr.pem

middlewares:
  audit:
    enabled: true

# https://verdaccio.org/docs/logger
# log settings
log: { type: stdout, format: pretty, level: http }

# 设置语言
# i18n
#   web: en-US

接下来先注册一下账号

npm adduser --registry http://localhost:4873/

输入账号密码,之后再去http://localhost:4873/登录发现登录成功,且目录下面会生成htpasswd文件

这里推荐一个挺好用的工具:nrm,这样可以帮你随时切换源~

这样我们在本地开发完一个npm包之后,可以切换npm源成本地npm仓库,然后执行npm publish即可,即可将npm包发布到本地的npm仓库中~

参考

  • Verdaccio官网
  • nrm

如有错误,欢迎指出,感谢阅读~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/700601.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣 700. 二叉搜索树中的搜索

题目来源&#xff1a;https://leetcode.cn/problems/search-in-a-binary-search-tree/description/ C题解1&#xff1a;二叉搜索树&#xff0c;右节点大于当前节点&#xff0c;左右节点小于当前节点&#xff0c;因此可以根据当前节点值与目标值的大小比较进行搜索。 class Sol…

【CSS】鼠标(移入/移出)平滑(显示/隐藏)下划线

文章目录 效果展示实现步骤1. 添加背景颜色2. 修改背景颜色3. 调整背景的大小4. 取消背景重复绘制5. 调小高度6. 设置背景绘制位置7. 隐藏背景8. 加入鼠标移入事件9. 平滑显示/隐藏下划线10. 调整一下背景图的位置11. 调整鼠标移入时进入的位置 效果展示 鼠标移入内容时&#…

基于matlab使用二维规范化互相关进行模式匹配和目标跟踪(附源码)

一、前言 此示例演示如何使用二维规范化互相关进行模式匹配和目标跟踪。该示例使用预定义或用户指定的目标以及要跟踪的类似目标的数量。归一化互相关图显示&#xff0c;当值超过设置的阈值时&#xff0c;将标识目标。 在此示例中&#xff0c;您使用规范化互相关来跟踪视频中…

行业云“组合拳”+AIGC开放战略,新华三的精耕务实之道

“今年或许不是实现宏伟目标的一年&#xff0c;但却是重新聚焦、重新调整和重新思考基础设施的时刻。”这是Gartner研究副总裁Paul Delory在谈到影响2023年云、数据中心和边缘基础设施趋势时所表达的观点&#xff0c;而影响趋势之一就是云团队将优化和重构云基础设施。对于企业…

爬虫入门指南:Python网络请求及常见反爬虫策略应对方法

文章目录 引言HTTP协议与请求方法HTTP协议请求方法 使用Python进行网络请求安装Requests库发送GET请求发送POST请求 反爬虫与应对策略IP限制使用代理IP&#xff1a; 用户代理检测设置User-Agent头部&#xff1a; 验证码参考方案 动态页面请求频率限制未完待续.... 引言 在当今…

1.盒子模型

页面布局要学习三大核心&#xff0c;盒子模型&#xff0c;浮动和定位.学习好盒子模型能非常好的帮助我们布局页面. 1.1看透网页布局的本质 网页布局过程: 1.先准备好相关的网页元素,网页元素基本都是盒子 2.利用CSS设置好盒子样式,然后摆放到相应位置 3.往盒子里面装内容. 网…

自定义MVC框架【上篇】--原理

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于自定义MVC的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.什么是自定义MVC框架&#xff1f; 二…

05 proxy代理、组件间的通信

React全家桶 一、脚手架配置代理(proxy)的方式 CORS: 请求url:http://www.baidu.com 发送url:http://www.jd.com response.setHeader(Access-Control-Allow-Origin,*);通过express快速搭建一个服务 创建一个图书组件 import React, { useEffect } from react import axio…

代码随想录算法训练营第51天 | 309.最佳买卖股票时机含冷冻期 + 714.买卖股票的最佳时机含手续费 + 股票问题总结

今日任务 目录 309.最佳买卖股票时机含冷冻期 - Medium 714.买卖股票的最佳时机含手续费 - Medium 股票问题总结 309.最佳买卖股票时机含冷冻期 - Medium 题目链接&#xff1a;力扣-309. 最佳买卖股票时机含冷冻期 给定一个整数数组prices&#xff0c;其中第 prices[i] 表…

字节测试工程师总结的自动化测试10个最佳实践

虽然大家都知道坚果是非常健康和有营养的&#xff0c;但是&#xff0c;当你尝试吃它的时候&#xff0c;我猜测过程都不会很顺利。 现实就是那么相似&#xff0c;我们都知道测试自动化对软件开发有好处&#xff08;就像坚果对我们的身体一样&#xff01;&#xff09;&#xff0…

【Redis】Redis五种常用数据类型的使用方法

文章目录 一、String数据类型1. SET/GET/APPEND/STRLEN2. INCR/DECR/INCRBY/DECRBY3. GETSET4. SETEX5. SETNX6. MSET/MGET/MSETNX 二、List数据类型1. LPUSH/LPUSHX/LRANGE2. LPOP/LLEN3. LREM/LSET/LINDEX/LTRIM4. LINSERT5. RPUSH/RPUSHX/RPOP/RPOPLPUSH 三、Hash数据类型&a…

【力扣】DP/贪心:1681. 最小不兼容性

【力扣】DP/贪心&#xff1a;1681. 最小不兼容性 文章目录 【力扣】DP/贪心&#xff1a;1681. 最小不兼容性1. 题目描述2. 解题2.1 不可行2.2 DP&#xff08;预处理 状态压缩 动态规划&#xff09; 参考 1. 题目描述 给你一个整数数组 nums​​​ 和一个整数 k 。你需要将这…

【C++】一文理清C++中的五种强制类型转换

深入理解C中五种强制类型转换的使用场景 一、C风格的强制类型转换 使用形式&#xff1a; Type b (Type)a;C风格的强制类型转换很容易理解&#xff0c;不管什么类型都可以直接进行转换。C也支持C风格的强制类型转换&#xff0c;但是C风格的强制类型转换可能会带来一些隐患&a…

2023.6.29-限定次数的循环操作

首先试着实现一个功能&#xff1a;键入一个整数&#xff0c;然后显示出这个整数个“*”&#xff1a; 代码&#xff1a; int a;printf("请输入一个整数&#xff1a;");scanf("%d",&a);while (a-- > 0)printf("*");printf("\n")…

模拟信号、数字信号

1、模拟信号、模拟电路 1&#xff09;模拟信号 是指连续变化的电信号&#xff0c;比如说话时的声音信号。 模拟信号可以用连续的电压或电流来表示&#xff08; 模拟信号就是电信号&#xff09;数字信号则是用离散的电压或电流来表示&#xff08;0 或 1&#xff09; 2&#x…

ROS:常用命令汇总

目录 一、前言二、rosnode三、rostopic3.1rostopic list3.2rostopic pub3.3rostpic echo3.4rostopic info 四、rosservice4.1rosservice args4.2rosservice call 五、rosmsg5.1rosmsg package5.2rosmsg show 六、rossrv6.1rossrv package6.2rossrv show 七、rosparam7.1rospara…

CSDN | CDC 城市开发者联盟开始招募啦!

一、CDC&#xff08;城市开发者联盟&#xff09;介绍 CDC 是由 CSDN 发起的公益性同城高端开发者社区&#xff0c;全称 City Developers Community&#xff0c;通过在每个城市招募和培养“CDC 城市合伙人”&#xff0c;一起在当地构建“千城千面”的线下开发者社交圈&#xff…

arcserver图层数据导出插件

arcserver数据导出插件使用 下载地址&#xff1a;https://download.csdn.net/download/u011405698/87966050?spm1001.2014.3001.5503 如果需要代码或商业合作请联系公众号&#xff1a;世奇 插件不依赖其他第三方类库&#xff0c;只依赖arcpy&#xff0c;使用简单方便。可以…

C++标准模板库STL (未完)

概述 STLstandard template library是 C 标准库的一部分&#xff0c;无需单独安装&#xff0c;只需#include 头文件 什么是模板&#xff1f;见c面向对象程序设计中模板一节 顺序性容器 vector 向量 变长数组 声明 vector<类型名> 变量名[数组长度];类型名可以是已有…

社交商务时代已经到来,ss客服帮您抓住风口

社交商务时代已经到来&#xff0c;ss客服帮您抓住风口 近年来&#xff0c;社交媒体商务的概念已成为一股强大的力量。通过将社交媒体平台的影响力和影响力与在线购物的便利性相结合&#xff0c;它正在彻底改变企业与客户互动和销售产品或服务的方式。 什么是社交商务&#xf…