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

相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript