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