内网npm私有仓库搭建以及使用教程

news2024/11/21 0:17:34

前言

前端团队沉淀一套通用的UI库、工具类、脚手架,不允许在公网发布,内网npm私有库搭建需求应运而生。如何在内网环境搭建npm私有仓库并使用?主角登场了 —— Verdaccio。接下来我来教大家使用 verdaccio 在内网环境中搭建npm私有仓库。

基础环境

为了避免因为基础环境不一致而产生意料之外的问题,基础环境要尽可能保持一致。

环境依赖

版本

说明

Centos

7.9

这里以Centos系统为例

Node.js

16.19.0

推荐 16.x lts

pm2

5.2.2

nodejs进程守护工具

verdaccio

5.19.1

npm私有仓库

nvm

0.39.1

nodejs版本管理工具

下载安装工具(nvm)

nvm国内镜像下载!

# 下载并安装nvm
curl -fsSL https://gitee.com/eagle_0810/nvm/raw/master/install.sh | bash

# 重载配置
source ~/.bashrc

# 验证执行安装成功
nvm --version

# 安装nodejs
nvm install v16.19.0

# 更换npm源为淘宝镜像
npm config set registry=https://registry.npmmirror.com

安装verdaccio、pm2

npm install -g verdaccio@5.19.1 pm2@5.2.2

修改verdaccio默认配置

其他更多配置可查看verdaccio官网

https://verdaccio.org/zh-CN/docs/configuration

# 执行verdaccio验证安装成功并生成配置文件
verdaccio

# 修改配置文件
vim /root/.config/verdaccio/config.yaml

# 修改页面标题
web:
  title: CloudWise-Verdaccio

# 上传npm包大小限制修改
max_body_size: 100mb

# 允许内外网其他设备访问
listen:
 - 0.0.0.0:4873

# 修改web端默认语言为中文
i18n:
 web: zh-CN

启动verdaccio服务

verdaccio是基于nodejs的应用,因此需要pm2守护verdaccio进程。

pm2 start verdaccio

注意:启动失败报错可执行以下命令查看pm2日志,根据日志修改报错并重新启动verdaccio服务。

pm2 logs verdaccio

验证是否部署成功

注意:开放对应端口(4873)

访问:http://ip:4873/

发布npm私有包

注意:发布私有包必须将镜像修改为私有镜像地址且私有npm包名称必须是"@{组织名}/{npm-name}"

修改镜像源地址

npm set registry http://ip:4873/

注册账号

输入以下命令后开始注册用户

npm adduser

登陆账号并验证是否登录成功

npm login

npm who am i

在项目package.json中配置包信息

如果从0开发的项目可以直接npm init

如果项目有package.json可直接手动修改

注意:私有包名称必须是"@{组织名}/{npm-name}"

例如:@cloudwise/map-common

发布、删除私有包

npm publish

npm unpublish 包名 --force

使用私有包

npm、yarn 切换回淘宝镜像,项目根目录下添加.npmrc、.yarnrc文件添加以下配置支持npm和yarn安装私有包。

# .npmrc 文件
# 指向内网私源 
@{组织名}:registry=http://ip:4873

# .yarnrc 文件
# 指向内网私源
"@{组织名}:registry" "http://ip:4873"

总结

以上就是我个人搭建npm私有仓库的实践了,总的来说使用verdaccio搭建npm私有仓库还是比较简单的,如果有哪里写的不对的地方或者有关教程优化建议欢迎留言指点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408775.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

canvas详细入门教程(1W字 吐血分享)

大家好&#xff0c;我是潘潘 今天为大家带来的是我已经写了很久了的canvas详细教程&#xff0c;对入门canvas很有帮助。 点击跳转原文&#xff1a; canvas详细教程原文 canvas是什么&#xff1f; 简单来说&#xff0c;<canvas> 是HTML5中的标签&#xff0c;它是一个容…

20分钟学会flex布局,熊二都表示学会了,你呢?

✏️ 作者&#xff1a;大二计算机专业学生 ♉ 星座&#xff1a;金牛座 &#x1f3e0; 主页&#xff1a;查看更多文章 &#x1f3c2; 关键&#xff1a;flex 前端布局 熊二都会 大家好&#xff0c;我是小周&#xff0c;今天分享的是熊二都能学会的前端 flex 布局&#xff0c;篇幅…

小程序 getActivePinia was called with no active Pinia. Did you forget to install pinia?

小程序项目使用pinia做状态管理报错&#xff1a; Error: [&#x1f34d;]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia createPinia() app.use(pinia) app运行打包时有个同样的错误 错误原因是&#xff1a;在外部js/t…

Collections类详解

目录 一.Collections概述&#xff1a; 1.1什么是Collections类&#xff1a; 1.2 Collections类和collection的区别和联系&#xff1a; 二. Collections类的主要方法&#xff1a; 一.Collections概述&#xff1a; 1.1 什么是Collections类&#xff1a; Java.util.Collections…

【Node.js】Express框架的基本使用

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 目录 初识Express Express简介 什么是Express 进一步理解 Express Express能做什么 Express的基本使用 …

前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

目录一、什么是Token二、获取token三、Token失效处理注意点1、主动退出2、Token过期① 逻辑图②方案③代码实现3、被人顶号① 逻辑图② 方案③代码实现一、什么是Token Token是服务端生成的一串字符串&#xff0c;当用户第一次登陆成功后&#xff0c;服务器会生成一个token&am…

vue 实现自适应屏幕

1.安装自适应屏幕插件&#xff08;优先使用vscode安装&#xff0c;需要调整px转化rem比例&#xff09; &#xff08;1&#xff09;安装插件&#xff1a; npm i lib-flexible --save &#xff08;2&#xff09;mian.js引入&#xff1a; import lib-flexible/flexible.js 2. 如果…

java中controller层是干嘛的?

最近在研究开源框架的源码&#xff0c;打算改写开源框架&#xff0c;适用于自身的业务场景。于是找到了一个框架(spiderFlow)。 根据他的git上的教程&#xff0c;搭建了一个。 controller层&#xff0c;在我们写代码的时候&#xff0c;一般为接口层&#xff0c;与前端&#xf…

CSS锥形渐变实现环形进度条

10月份因为疫情原因、又开启了居家办公模式&#xff0c;空闲之余&#xff0c;与其选择“躺平”&#xff0c;不如去做一些有意义的事情&#xff0c;内心的想法驱使着我去做些什么&#xff0c;但是又没有合适的素材&#xff0c;直到接手了最近的一个可视化项目&#xff0c;一个图…

若依框架---权限管理设计

前言 若依权限管理包含两个部分&#xff1a;菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称&#xff0c;可以细分为目录、菜单和按钮&#xff0c;以若依自身为例&#xff1a; 目录&#xff0c;就是页…

关于古老的jsp页面的知识汇总(超详细)

1. 为什么要开发出来jsp文件呢&#xff1f; 面对需要将大量的结果&#xff0c;甚至是一整个<html>页面返回给响应体&#xff0c;之前的方法就显得十分麻烦。 之前我们是这样将结果返回给响应体的&#xff0c;如下图&#xff1a; 于是就设计了jsp文件&#xff0c;用来解决…

antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制

限制上传文件格式.rar、.zip、.pdf、.jpg、.png、.docx antd 中upload对于限制上传文件格式的属性是accept&#xff0c;在开发的过程中&#xff0c;accept对于.doc、.docx、.pdf、.png、.jpg、.rar&#xff0c;格式的限制是完全没有问题的。但是测试和我说&#xff0c;当选择文…

前端开发之vue-grid-layout的使用和实例

前端开发之vue-grid-layout的使用和实例前言效果图一、vue中简单案例1、安装组件NPMYarn2、vue文件二、vue3使用&#xff08;vue文件&#xff09;1、需要导入vue3支持的该版本插件2、在mian.js里引入&#xff1a;三、在IE上无法打开&#xff0c;并报错缺少&#xff1a;&#xf…

【TypeScript基础】TypeScript之常用类型(下)

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 上篇文章讲解了TypeScript的一些常用类型&#xff0c;&#x1f449;&#x1f3fb;详细内容请阅读【TypeScript基础】TypeScript之常用类型&#xff08;上&#x…

解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案

目录 前言 第一种 第二种 第三种 前言 大家好呀&#xff01;我是爷爷的茶七里香&#xff0c;今天遇到了一件&#x1f95a;疼的事&#xff0c;一个vuevant写的APP&#xff0c;更换了电脑之后运行不起来&#xff0c;就很奇怪很离谱&#xff0c;报错信息如下&#xff1a; ER…

使用Iframe打印预览pdf,兼容谷歌火狐浏览器

功能场景&#xff1a; 点击页面的打印按钮&#xff0c;可以调用浏览器的打印功能&#xff0c;并预览打印pdf文件。解决火狐浏览器出现about:blank问题。 功能实现&#xff1a; 实现思路&#xff1a; 使用接口获取pdf文件的二进制流&#xff0c;响应类型为blob将拿到的二进制…

vite 本地运行首次进入页面加载慢问题

思考 vite的适用场景是什么&#xff1f; 由于我使用了tailwindcss插件 使用webpack 每次启动所有的项目的css样式都预先使用tailwindcss 转换成css 性能普通的电脑启动项目需要1分钟到2分钟。不过首次加载不会有什么多大的延迟&#xff0c;按需导入的页面加载也不会有多大的延…

博客项目- SSM 实现

文章目录1. 创建项目2. 数据库设计3. 前置任务3.1 拦截器3.2 统一数据格式3.3 创建一个 Constant3.4 统一异常处理3.5 密码加密4. 功能实现4.1 登录功能4.2 注册功能4.3 博客列表页 &#xff08;功能实现&#xff09;4.3.1 左侧框4.3.2 右侧框 (分页功能 页面显示)4.4 博客详情…

【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片 1、简介 插入图片 : 插入图片方式 : 在 HTML 中 , 使用 <img> 标签可以插入一张图片 ;插入图片适用场景 : 显示 内容 , 按钮 , 一般都使用 插入图片 的方式 展示图片 ,设置插入图片大…

IDEA从零到精通(26)之MybatisX插件的安装与使用

文章目录作者简介引言导航概述安装插件插件的使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的…