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