前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包

简介: 前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包

搭建团队的私有仓库,保证团队组件的安全维护和私密性,是进阶前端开发主管路上,必不可少的一项技能。


一、原理

我们平时使用npm publish进行发布时,上传的仓库默认地址是npm,通过Verdaccio工具在本地新建一个仓库地址,再把本地的默认上传仓库地址切换到本地仓库地址即可。当npm install时没有找到本地的仓库,则Verdaccio默认配置中会从npm中央仓库下载。


二、常用的仓库地址


三、优势

  • 私密性高,仅团队共享。
  • 安全性高,能够有效的防治恶意代码攻击。
  • 使用局域网,传输速度快。


四、准备环境

  • node(v12或更高)
  • npm(pnpm或yarn)
  • verdaccio(v5)
  • nrm(快速切换仓库源)
  • pm2(守护进程)


六、使用verdaccio搭建私有npm服务

1、安装
npm install -g verdaccio
2、运行

启动时间会很久,断开cmd会关掉服务,可以使用pm2守护进程即可。

// 访问http://localhost:4837

verdaccio

3、配置config.yaml,使局域网下能共享访问,否则只能本机访问。

C:\Users\admin\AppData\Roaming\verdaccio\config.yaml

// 最后面添加以下配置

listen: 0.0.0.0:4873

重启,必须重启电脑配置才能生效。


4、重新运行

// 访问http://ip:port/

// 不要访问本地localhost下的

verdaccio

七、npm常见操作

查看当前用户信息
npm who am I
查看源地址
npm config list
切换源地址
npm set <registry> <url>
删除源地址
npm config rm <registry>
创建用户
npm adduser
登录
npm login
发布
npm publish

八、项目使用

1、你可以通过以下命令来设置 registry。
npm set registry http://localhost:4873/
2、你可以在需要时带上 --registry 参数。
npm install --registry http://localhost:4873
3、在你的 .npmrc 中设置一个 registry 属性。
.npmrc
registry=http://localhost:4873
4、在你的 package.json 中设置 publishConfig
{
  "publishConfig": {
    "registry": "http://localhost:4873"
  }
}

九、插件打包

1、 package.json 中新增一条编译为库的命令
"lib": "vue-cli-service build --target lib --name vue-verdaccio-zourongle --dest lib src/plugins/index.js"

–target : 构建指标,默认为利用模式。这里批改为 lib 启用库模式。

–dest : 输入目录,默认 dist 。这里咱们改成 lib

[entry] : 最初一个参数为入口文件,默认为 src/App.vue 。这里咱们指定编译 src/plugins/index.js 组件库目录。

–name : 输出名称,这里咱们改成 自己的名称

2、 执行打包命令
npm run lib
3、打包成功

生成包文件夹lib

十、插件上传

1、设置镜像源
npm set registry http://localhost:4873/
2、 配置 package.json

在插件包文件夹里面创建package.json

{
    "name": "vue-verdaccio-zourongle",
    "version": "0.1.0",
    "description": "今天我发布一个插件",
    "main": "vue-verdaccio-zourongle.umd.min.js",
    "license": "MIT",
    "private": false
}

private : 必须设置为 fasle

main : 我的项目入口,默认为同级目录的 index.js

name : npm包名,就是咱们 import xxx from packagename 中的包名

3、登录到 npm

在插件包的文件夹里面执行

npm login
4、公布到 npm
npm publish

十一、上传包到私库报错

1、错误信息

503 Service Unavailable - PUT http://localhost:4873/xxxx - one of the uplinks is down, refuse to publish


2、解决方案

在verdaccio启动的配置文件config.yaml加上配置:

publish:
  allow_offline: true
3、重启verdaccio后再publish

上传成功了。

目录
相关文章
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
573 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
568 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1682 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
204 1
.自定义认证前端页面
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
389 1
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
16391 2
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
617 0
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
3265 0
|
JavaScript 测试技术 Linux
Npm配置全局安装插件目录以及命令用法扩展
eslint 是一个代码检查的插件,类似sonarqube里面的打码扫描一样,像这种插件的话只需要本地使用,就可以用开发环境的进行依赖包安装。
Npm配置全局安装插件目录以及命令用法扩展
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
1289 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1250
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    566
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    429
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    546
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    507
  • 推荐镜像

    更多
  • NPM