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

上传成功了。

目录
打赏
0
0
0
0
13
分享
相关文章
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
45 9
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
305 5
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
4630 2
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
982 0
|
4月前
|
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
379 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
3月前
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
88 3
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
270 0
2071 verbose node v16.6.0 2072 verbose npm v7.19.1或者 no such file or directory, lstat ‘D:\wor
该博客文章提供了解决在使用npm版本7.19.1时出现的"no such file or directory"错误的具体方法,建议通过降级npm到6.14.8版本来解决问题,并确认了该方法可以成功安装node_modules。
2071 verbose node v16.6.0 2072 verbose npm v7.19.1或者 no such file or directory, lstat ‘D:\wor
成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
这篇文章介绍了如何解决npm版本与Node.js版本不兼容的问题,提供了查看当前npm和Node.js版本的步骤,以及如何根据Node.js版本选择合适的npm版本并进行升级的详细指导。
成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】

热门文章

最新文章

推荐镜像

更多