当前位置: 首页 > article >正文

21 vue3之发布npm插件(hook自定义指令)

功能需求 

一个插件同时实现定义指令 + hooks

实现一个监听元素变化的hook

主要会用到一个新的API resizeObserver  兼容性一般 可以做polyfill

但是他可以监听元素的变化 执行回调函数 返回 contentRect 里面有变化之后的宽高。

前置知识

  • IntersectionObserver主要侦听元素是否在视口内
  • MutationObserver 主要侦听子集的变化 还有属性的变化 以及 增删改差
  • ResizeObserver 主要侦听元素宽高的变化 (案例使用这个)

初始化项目

npm init -y

tsc --init

//安装依赖 使用-D因为我们的插件肯定是vue项目使用  开发人员已经有vue 减少体积就不必上传到npm上

cnpm i vue vite -D

目录结构 

index.ts代码 

import { App, defineComponent, onMounted } from 'vue'
 
function useResize(el: HTMLElement, callback: (cr: DOMRectReadOnly,resize:ResizeObserver) => void) {
    let resize: ResizeObserver
        resize = new ResizeObserver((entries) => {
            for (let entry of entries) {
                const cr = entry.contentRect;
                callback(cr,resize)
            }
        });
        resize.observe(el)
}
 
 
 
const install = (app: App) => {
    app.directive('resize', {
        mounted(el, binding) {
            useResize(el, binding.value)
        }
    })
}
 
useResize.install = install
 
export default useResize

如何使用vite打包插件库

构建生产版本 | Vite 配置--》库模式

vite.config.js配置

import { defineConfig } from 'vite'

// vite 会帮我们打包es module和Umd的二种规范
module.exports = defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',//打包入口文件
      name: 'useResize', //与hooks的名称一致
    },
    // 透传给rollup打包工具
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'useResize'
        }
      }
    }
  }
})

package.json 配置

文本注释是需要配置的

{
  "name": "v-resize-cookie",
  "version": "1.0.0", //版本需要配置
  "description": "",
  "main": "dist/v-resize-cookie.umd.js", //require使用的文件
  "module": "dist/v-resize-cookie.min.js",//es6使用的文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build" //打包命令
  },
  "keywords": [],
  "author": "",
  "files": [ //上传的产物文件
    "dist",
    "index.d.ts"
  ],
  "license": "ISC",
  "devDependencies": {
    "vite": "^5.4.8",
    "vue": "^3.5.8"
  }
}

 发布命令

npm login

npm publish


http://www.kler.cn/a/327074.html

相关文章:

  • HTMLCSS:3D 旋转卡片的炫酷动画
  • 直播系统搭建教程安装说明
  • 【初阶数据结构篇】链式结构二叉树(续)
  • Unreal5从入门到精通之如何解决在VR项目在头显中卡顿的问题
  • 《TCP/IP网络编程》学习笔记 | Chapter 1:理解网络编程和套接字
  • 杨传辉:云+AI 时代的一体化数据库|OceanBase发布会实录
  • 国产RISC-V案例分享,基于全志T113-i异构多核平台!
  • 【刷题6】一维前缀和、二维前缀和
  • 学习VTK的目的和方法
  • 速盾:cdn加速什么好?
  • 【Linux探索学习】第二弹——Linux的基础指令(中)——夯实基础第二篇
  • 25考研咨询周开启,西安电子科技大学是否改考408??
  • HarmonyOS Next系列之水波纹动画特效实现(十三)
  • ClickHouse入库时间与实际相差8小时问题
  • 升级FreeBSD13.2到14.1-RELEASE
  • 树和二叉树知识点大全及相关题目练习【数据结构】
  • golang 获取证书的生效及过期时间
  • 【论文笔记】Flamingo: a Visual Language Model for Few-Shot Learning
  • Redis篇(应用案例 - 附近商户)(持续更新迭代)
  • Pgsql 数据库操作
  • 【运动控制】关于GPIO通用输入口是NPN型数字输入
  • Grafana指标汉化
  • 【测试-BUG篇】软件测试的BUG知识你了解多少呢?
  • 自动驾驶系列—DOW(开门预警):让每一次开门都更安心
  • 水囊在消防灭火工作中的作用
  • 机器人的性能指标