前端自定义组件+自建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
相关推荐
再见晴天*_*1 小时前
logback 日志不打印
java·服务器·logback
myskybeyond2 小时前
时序数据库TDEngine安装和使用
服务器·时序数据库·tdengine
Java初学者小白2 小时前
秋招Day15 - Redis - 缓存设计
java·数据库·redis·缓存
myloveasuka3 小时前
[Linux]内核如何对信号进行捕捉
linux·运维·服务器
渲吧-云渲染3 小时前
云渲染时,电脑能关机吗?关键阶段操作指南
运维·服务器·电脑
BD_Marathon3 小时前
Ubuntu下的Tomcat服务器部署
服务器·ubuntu·tomcat
m0_694845573 小时前
服务器需要备案吗?在哪些地区需要备案?
linux·运维·服务器·云计算
weixin_437398213 小时前
转Go学习笔记
linux·服务器·开发语言·后端·架构·golang
南瓜胖胖4 小时前
【seismic unix 合并两个su文件】
服务器·unix
聪聪的学习笔记5 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js