前端自定义组件+自建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
相关推荐
fuyongliang1233 小时前
linux Nginx服务配置介绍,和配置流程
运维·服务器·网络
醉方休4 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
醉方休4 小时前
PNPM库离线安装方案
npm
UNbuff_05 小时前
Linux bzip2 命令使用说明
linux·运维·服务器
小马哥编程5 小时前
DNS解析中的服务器协作机制
服务器·git·github
嫩萝卜头儿5 小时前
虚拟地址空间:从概念到内存管理的底层逻辑
linux·服务器·网络
Armyyyyy丶5 小时前
Redis底层实现原理之五大基础结构
数据结构·redis·缓存
LJC_Superman6 小时前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
proware6 小时前
昇腾310i Pro固件说明
linux·运维·服务器
ʚʕ̯•͡˔•̯᷅ʔɞ LeeKuma7 小时前
nginx常用命令(备忘)
服务器·nginx