使用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
相关推荐
liangshanbo121511 小时前
Webpack 文件指纹面试题整理
前端·webpack·node.js
liangshanbo121513 小时前
Webpack 常见 Plugin 面试题
前端·webpack·node.js
liangshanbo121513 小时前
Webpack Tree Shaking 面试题整理
前端·webpack·node.js
搬砖的小码农_Sky14 小时前
AI Agent:Node.js和浏览器运行环境的本质区别
javascript·node.js·人机交互
李游Leo15 小时前
HarmonyOS 7 ArkTS + Node.js:把权限声明、运行时授权与隐私文案做成提审前一致性扫描【鸿蒙心迹】
华为·node.js·harmonyos
liangshanbo121517 小时前
Webpack的分包策略面试题
前端·webpack·node.js
搬砖的小码农_Sky1 天前
AI Agent:Windows上Node.js安装后 npm -v报错
前端·npm·node.js·人机交互
liangshanbo12152 天前
面试题:如何优化 Webpack 的打包速度?
前端·webpack·node.js
2601_962177303 天前
Windows 安装 Codex CLI 入门级教程
人工智能·windows·node.js·ai编程
光影少年3 天前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js