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

自建 npm 缓存服务

  • 安装 verdaccio
bash 复制代码
npm install -global verdaccio
  • 启动 verdaccio
bash 复制代码
verdaccio

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

开发公共组件

  • 在你的工程目录下执行 npm init -y ,相关配置自己定义
  • index.ts 中开发组件逻辑
bash 复制代码
class DateUtils{
    constructor(){}
    formatDate(){
        console.log(new Date());
    }
}
export default DateUtils;
  • 配置 package.json 注意,每次有更新的时候,需要来这边该版本号
bash 复制代码
{
  "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 仓库中
bash 复制代码
npm publish --registry http://localhost:4873/

使用组件

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

组件更新

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

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

bash 复制代码
npm install -g npm-check-updates
  • 执行更新组件的命令
bash 复制代码
npm i --registry=http://localhost:4873
相关推荐
古希腊数通小白(ip在学)5 分钟前
HCIA实现不同vlan间的通信
linux·服务器·网络
星辰离彬18 分钟前
Java 与 MySQL 性能优化:MySQL连接池参数优化与性能提升
java·服务器·数据库·后端·mysql·性能优化
小苹果13572 小时前
阿里云mysql数据丢失,如何通过服务器备份在其他服务器上恢复数据,并获取mysql丢失数据,完成mysql数据恢复
服务器·mysql·阿里云
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
hrrrrb3 小时前
【TCP/IP】12. 文件传输协议
服务器·网络·tcp/ip
安全系统学习6 小时前
网络安全之RCE分析与利用详情
服务器·网络·安全·web安全·系统安全
longze_76 小时前
Ubuntu连接不上网络问题(Network is unreachable)
linux·服务器·ubuntu
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript