前端实战:基于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

上传成功了。

目录
相关文章
|
21天前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
1月前
|
前端开发 JavaScript
💥【exceljs】纯前端如何实现Excel导出下载和上传解析?
本文介绍了用于处理Excel文件的库——ExcelJS,相较于SheetJS,ExcelJS支持更高级的样式自定义且易于使用。表格对比显示,ExcelJS在样式设置、内存效率及流式操作方面更具优势。主要适用于Node.js环境,也支持浏览器端使用。文中详细展示了如何利用ExcelJS实现前端的Excel导出下载和上传解析功能,并提供了示例代码。此外,还提供了在线调试的仓库链接和运行命令,方便读者实践。
291 5
|
1月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
49 2
|
2月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
89 0
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
128 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
1月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT

推荐镜像

更多