前端自定义组件+自建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
相关推荐
中云DDoS CC防护蔡蔡1 分钟前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
HPC_fac130520678161 小时前
以科学计算为切入点:剖析英伟达服务器过热难题
服务器·人工智能·深度学习·机器学习·计算机视觉·数据挖掘·gpu算力
只因在人海中多看了你一眼1 小时前
分布式缓存 + 数据存储 + 消息队列知识体系
分布式·缓存
yaoxin5211232 小时前
第二十七章 TCP 客户端 服务器通信 - 连接管理
服务器·网络·tcp/ip
Dlwyz2 小时前
redis-击穿、穿透、雪崩
数据库·redis·缓存
sinat_384241096 小时前
使用 npm 安装 Electron 作为开发依赖
服务器
Oak Zhang7 小时前
sharding-jdbc自定义分片算法,表对应关系存储在mysql中,缓存到redis或者本地
redis·mysql·缓存
Kkooe8 小时前
GitLab|数据迁移
运维·服务器·git
门牙咬脆骨8 小时前
【Redis】redis缓存击穿,缓存雪崩,缓存穿透
数据库·redis·缓存
门牙咬脆骨8 小时前
【Redis】GEO数据结构
数据库·redis·缓存