前端自定义组件+自建npm缓存服务器

news/2024/9/20 1:21:47/ 标签: npm, 缓存, 服务器, verdaccio, 前端组件化

npm__0">自建 npm 缓存服务

npm install -global verdaccio
verdaccio

默认情况下,会在本地启动一个服务 http://localhost:4873/

开发公共组件

  • 在你的工程目录下执行 npm init -y ,相关配置自己定义
  • index.ts 中开发组件逻辑
class DateUtils{constructor(){}formatDate(){console.log(new Date());}
}
export default DateUtils;
  • 配置 package.json 注意,每次有更新的时候,需要来这边该版本号
{"name": "cn.gbits.web.dateutils","version": "1.0.7","description": "日期工具类","main": "index.ts","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}
  • 将组件发布到 npm 仓库中
npm publish --registry http://localhost:4873/

使用组件

  • 【可选】初始化一个 vite 工程
npm create vite@latest my-vue-app -- --template vue
  • 在工程下执行安装组件命令
npm i --registry=http://localhost:4873 cn.gbits.web.dateutils
  • 使用组件,测试时可以直接在 App.vue中
import DateUtils from 'cn.gbits.web.dateutils';
let dateutils = new DateUtils();
dateutils.formatDate();

组件更新

  • 更新完组件逻辑之后,在组件的 package.json 中调整版本号,然后发布
npm publish --registry http://localhost:4873/
  • 在使用的工程中执行检查更新的命令
npm-check-updates --registry=http://localhost:4873 -u

注意,如果没有安装过 npm-check-updates ,需要先安装

npm install -g npm-check-updates
  • 执行更新组件的命令
npm i --registry=http://localhost:4873

http://www.ppmy.cn/news/1504432.html

相关文章

【WPF开发】如何将工程打包成单独的EXE安装包

一、安装NSIS与HM NIS Edit 1、下载和安装NSIS NSIS官网 2、下载和安装HM NIS Edit HM NIS Edit官网 点击下载后等待几秒,就会弹出下载提示 双击下载的安装包,点击“OK” 点击“下一步” 点击“我接受” 更改路径后,点击安装即可 二、打包软…

82.WEB渗透测试-信息收集-框架组件识别利用(6)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:81.WEB渗透测试-信息收集-框架组件识别利用(5) log4j/log4j2&…

测试人生 | 招聘严峻期从面试无力感,到一天2个offer的一些经验分享(内附美团、字节、快手等面试题)

本人是霍格沃兹北京测试开发学社线下3期学员,拥有3年测试工作经验,之前一直在某大厂外包做软件测试,期间主要是以功能测试为主。 经过一个月的高强度找工作奋战,最终拿下了3家公司offer,选择了一家自己很满意的公司。…

③分析胃癌组蛋白脱乙酰酶HDS模型-SeuratHDS细胞比例

目录 文献Seurat处理步骤 ①HDS分析步骤 ②原文献数据处理 加载单细胞Seurat 换算每个样本每种细胞比例 比较两个分组比例 ①比例计算 ②绘图 单种细胞比例亚组间差异 ①添加分组信息 ②循环作图 文献Seurat处理步骤 组蛋白脱乙酰酶介导的胃癌肿瘤微环境特征及协同…

机器学习笔记 - python学习记录三 Python中的矢量化

当我们必须处理大量数据集时,计算上非最优的函数可能会成为算法的巨大瓶颈,最终导致模型运行时间过长。为了确保代码计算效率高,我们将使用矢量化。任何算法执行的时间复杂度都非常重要,决定了应用程序是否可靠。在实时输出应用方面,尽可能在最佳时间内运行大型算法非常重…

【从相邻元素对还原数组】python刷题记录

R3-图篇 饭前一道题 思路: 单向构造 class Solution:def restoreArray(self, adjacentPairs: List[List[int]]) -> List[int]:mnlen(adjacentPairs)#n表示数组元素总数n1#统计dictdefaultdict(int)#存储关系哈希表hashmapdefaultdict(list)for a,b in adjacent…

E25.【C语言】练习:修改二进制序列的指定位

十进制13-->二进制01101 现要求二进制序列的第5位修改为1,再改成0 复习:逻辑运算 非(NOT)(C语言:~) x0,NOT x-->1;x1,NOT x-->0 与(…

day12 多线程

目录 1.概念相关 1.1什么是线程 1.2什么是多线程 2.创建线程 2.1方式一:继承Thread类 2.1.1实现步骤 2.1.2优缺点 2.1.3注意事项 2.2方式二:实现Runnable接口 2.2.1实现步骤 2.2.2优缺点 2.2.3匿名内部类写法 2.3方式三:实现cal…

JAVA游戏源码:仙剑|大学生练手项目

学习java朋友们,福利来了,今天小编给大家带来了一款仙剑源码。注意:此源码仅供学习使用!! 源码搭建和讲解 启动main入口: //************************************************************************ // ************完整源码…

一步步搭建Web自动化测试框架

测试框架的设计有两种思路,一种是自底向上,从脚本逐步演变完善成框架,这种适合新手了解框架的演变过程。另一种则是自顶向下,直接设计框架结构和选取各种问题的解决方案,这种适合有较多框架事件经验的人。本章和下一张…

jenkins集成jmeter

jenkins 安装插件HTML Publisher startup trigger Groovy 脚本介绍 cd /app/jmeter rm -rf result.jtl jmeter.log report mkdir -p report sh /app/jmeter/apache-jmeter-5.6.3/bin/jmeter.sh -n -t test.jmx -l result.jtl -e -o ./report-n: 表示以非 GUI 模式运行 JMete…

一拖三无线充底座-带给你极致的便利生活

随着科技的不断进步,无线充电技术已经逐渐渗透到我们日常生活的方方面面,一拖三无线充底座作为其中的佼佼者,以其高效、便捷的特点受到广大用户的青睐。本文将从电磁感应原理、多线圈设计、频率匹配、电能传输、功率分配以及充电管理六个方面…

尚硅谷电商实时数仓笔记-《二》数仓建模概述

上一篇: 尚硅谷电商实时数仓笔记-《一》数仓概述-CSDN博客 二、数仓建模概述 2.1 数据仓库建模的意义 如果把数据看作图书馆里的书,我们希望看到它们在书架上分门别类地放置; 如果把数据看作城市的建筑,我们希望城市规划布局合理…

javascript的隐式转换和显式转换

javascript隐式转换 其中号两边只要有一个是字符,都会把另外一个转为字符 如果是加号以外的算术运算符,比如-*都会把数据转换为数字类型。 比如12得出结果是字符型12 2-1得出结果是数字型1 23得到结果是数字型23 显式转换,比如说要把一…

基于ThinkPHP开发的校园跑腿社区小程序系统源码,包含前后端代码

基于ThinkPHP开发的校园跑腿社区小程序系统源码,包含前后端代码 最新独立版校园跑腿校园社区小程序系统源码 | 附教程 测试环境:NginxPHP7.2MySQL5.6 多校版本,多模块,适合跑腿,外卖,表白,二…

每日新闻掌握【2024年8月1日 星期四】

2024年8月1日 星期四 农历六月廿七 今天是中国人民解放军建军纪念日 TOP大新闻 男乒运动员王楚钦回应巴黎奥运会爆冷出局 7月31日,巴黎奥运会乒乓球男子单打1/16决赛爆出冷门,头号种子中国选手王楚钦2比4不敌瑞典选手莫雷加德,无缘16强。 …

Turbo Boost 禁用

最近在做OAI NR的时候关闭CPU 睿频的时候出了一些问题,这里我把我找到的资料记录一下: 禁用 Turbo Boost 的过程可能会因不同的 BIOS/UEFI 和操作系统设置而有所不同。以下是一些可能的原因及解决方法: 可能的原因 BIOS/UEFI 设置问题: 你的…

【从零开始一步步学习VSOA开发】快速体验SylixOS

快速体验SylixOS 安装完毕RealEvo-IDE 后,同时也安装了RealEvo-Simulator。RealEvo-Simulator 是一个虚拟运行环境,可以模拟各种体系结构并在其上运行 SylixOS。相比于物理板卡,在 RealEvo-Simulator 进行运行调测更加的方便快捷且成本低廉。…

php 一个极简的类例子

https://andi.cn/page/621627.html

JavaScript基础——数据类型转换

显示数据类型转换 String()函数进行显示转换 Number()函数进行显示转换 Boolean()函数进行显示转换 隐式数据类型转换 算术运算隐式转化 比较操作隐式转化 赋值操作 在JavaScript中,数据类型转换是常见的操作,它允许将一种类型的数据转换为另一种…