自定义hook、plugin、directive 三管齐下，使用MutationObserver实现监听dom宽高变化需求，并发布至npm

技术方案

为什么不使用 MutationObserver 而使用了 ResizeObserver ？
原因在于: MutationObserver 主要用于侦听 dom 树中子集的变化、属性的变化、增删改查等，而且其身上属性方法非常多， 在此使用 ResizeObserver 语意将更加明确，就是对 dom 的宽高做监听并作出处理，因此采用 ResizeObserver 。

步骤一

初始化项目结构

步骤二

安装两个库

步骤三

在src/index.ts中书写逻辑代码

步骤四

书写逻辑

步骤五

如何使用 vite 进行打包 ？
首先配置 vite ：

其次配置 script 打包指令：
在 package.json 中添加一条 script : "build": "vite build"

最后终端执行:npm run build

打包成功！

步骤六

补充声明文件:

步骤七

修改package.json文件

// 第一版
"version": "0.0.1",
// require module.exports 模式时使用
"main": "dist/v-resize-wl.umd.js",
// import export 时使用
"module": "dist/v-resize-wl.mjs",
// 只发 npm 所需的包
"files": [
	// 打包后的目录
    "dist",
    // 声明文件
    "index.d.ts"
 ],

步骤八

各单位就绪，准备发布npm。

1. 首先需要有一个 npm 账号，通过 npm adduser注册一个 npm 账号。
2. 注册完成后使用 npm login登录，随后使用 npm publish进行发布。

注意 ⚠️: 如果有报错 ➡️ You do not have permission to publish "v-resize-wl". Are you logged in as the correct user? npm ERR! 403 In most cases, you or one of your dependencies are requestingnpm ERR! 403 a package version that is forbidden by your security policy.那是因为包名重复了，换一个包名吧。

发包成功

演示包的正确性

demo 项目中安装我们自己发的 npm 包:
npm i v-resize-wl778

将包注册为自定义指令:

vue 代码:

<template>
  <div v-resize="cb" class="box">
    <div class="innerBox">hello,npm</div>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import useObserveResize from 'v-resize-wl778'
import { onMounted } from 'vue'
onMounted(() => {
  console.log(document.querySelector('#box'))
  useObserveResize(document.querySelector('#box') as HTMLElement, (e: any) => {
    console.log(e)
  })
})

const cb = (e: any) => {
  console.log(e)
}
</script>

<style scoped lang="scss">
.box {
  margin: 200px auto;
  border: 2px solid #ccc;
  background-color: skyblue;
  resize: both;
  overflow: hidden;
  .innerBox {
    width: 200px;
    height: 200px;
  }
}
</style>

效果: 支持拉伸调整大小

拖拽调整蓝块大小并查看控制台：

至此，自定义hook、plugin、directive 三管齐下，使用MutationObserver实现监听dom宽高变化需求，并发布至npm包操作完成✅。