前端自定义组件+自建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
相关推荐
奶糖趣多多4 分钟前
Redis知识点
数据库·redis·缓存
九河云1 小时前
AWS账号注册费用详解:新用户是否需要付费?
服务器·云计算·aws
Lary_Rock1 小时前
RK3576 LINUX RKNN SDK 测试
linux·运维·服务器
CoderIsArt1 小时前
Redis的三种模式:主从模式,哨兵与集群模式
数据库·redis·缓存
幺零九零零2 小时前
【计算机网络】TCP协议面试常考(一)
服务器·tcp/ip·计算机网络
云飞云共享云桌面3 小时前
8位机械工程师如何共享一台图形工作站算力?
linux·服务器·网络
ketil275 小时前
Redis - String 字符串
数据库·redis·缓存
幺零九零零6 小时前
【C++】socket套接字编程
linux·服务器·网络·c++
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js
free8 小时前
netstat中sendq/recvq用于排查发送端发送数据的问题
服务器