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

相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904276 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js