使用Verdaccio搭建私有npm仓库

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

一、原理

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

二、常用的仓库地址

三、优势

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

四、准备环境

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

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

安装
复制代码
npm install -g verdaccio
运行

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

// 访问http://localhost:4837

复制代码
verdaccio
配置config.yaml,使局域网下能共享访问,否则只能本机访问。

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

// 最后面添加以下配置

listen: 0.0.0.0:4873

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

重新运行

// 访问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

八、项目使用

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

九、插件上传

设置镜像源
复制代码
npm set registry http://localhost:4873/
以vuecli3库模式为例子
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、 配置 package.json
复制代码
{
    "name": "vue-verdaccio-zourongle",
    "version": "0.1.0",
    "description": "今天我发布一个插件",
    "main": "lib/vue-verdaccio-zourongle.umd.min.js",
    "license": "MIT",
    "private": false
}

private : 必须设置为 fasle

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

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

登录到 npm
复制代码
登录到 npm login
公布到 npm
复制代码
npm publish
相关推荐
xd000029 小时前
11. vue pinia 和react redux、jotai对比
node.js
程序猿小D10 小时前
第16节 Node.js 文件系统
linux·服务器·前端·node.js·编辑器·vim
好运yoo17 小时前
npm install的原理
前端·npm
前端老六喔19 小时前
🎉 开源项目推荐 | 让你的 TypeScript/React 项目瘦身更简单!
node.js·前端工程化
pzpcxy52019 小时前
安装VUE客户端@vue/cli报错警告npm WARN deprecated解决方法 无法将“vue”项识别为 cmdlet、函数
前端·vue.js·npm
醉书生ꦿ℘゜এ19 小时前
npm error Cannot read properties of null (reading ‘matches‘)
前端·npm·node.js
超级土豆粉20 小时前
从0到1写一个适用于Node.js的User Agent生成库
linux·ubuntu·node.js
Revol_C21 小时前
【AI+赋能前端-提效篇】开发一个支持项目打包产物本地调试的小工具,已发布到npm!!
前端·npm·ai编程
空中湖1 天前
‘pnpm‘ 不是内部或外部命令,也不是可运行的程序
npm·node.js
SailingCoder1 天前
grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!
运维·人工智能·typescript·node.js·grafana