前端自定义组件+自建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
相关推荐
xixingzhe23 分钟前
linux删除用户
linux·运维·服务器
zr5268554474 分钟前
单通道串口服务器(三格电子)
运维·服务器·单片机
海域云赵从友10 分钟前
腾讯云下架印度云服务器节点,印度云服务器租用何去何从
服务器·云计算·腾讯云
肆仙.19 分钟前
第一次作业
linux·运维·服务器
OpsEye32 分钟前
服务器及MySQL安全设置指南
服务器·mysql·安全
六千江山1 小时前
Redis 多路复用(Multiplexing)
java·redis·缓存
言之。1 小时前
Redis解决热key问题
数据库·redis·缓存
#Page#2 小时前
electron 环境配置,离线安装,npm无法安装
javascript·electron·npm
cdut_suye2 小时前
基于Linux环境的进度条实现
linux·运维·服务器·数据库·人工智能·深度学习·中间件
daydayup95272 小时前
FTP服务
linux·运维·服务器