简单搭建工程

新建一个src文件，在src下面新建index.ts文件；打开终端输入npm init去生成一个package.json文件
在通过tsc --init生成一个TS配置文件
新建一个vite.config.ts文件，在新建一个index.d.ts声明文件

安装两个库

安装Vue3, npm i vue -D
安装Vite， npm i vite -D

如何监听dom宽高变化

在index.ts文件中编写，首先先定义一个函数useResize，有一个新的APIResizeObserver主要侦听元素的变化以及增删改查,这是使用这个来侦听dom宽高变化

上面的entries其实是一个数组，因为可以侦听多个DOM元素，利用resize.observe()开启侦听

useResize()传入两个参数，el 和 callback DOM元素和返回的函数，当我们侦听元素宽高发生变化，就调用callback去通知操作

function useResize(el:HTMLElement, callback: Function) {
 let resize = new ResizeObserver((entries) => {
  callback(entries[0].contentRect)
 })
 resize.observe(el)
}

自定义指令

前面我们安装了vue的依赖包，引入APP,实现install函数，注入App他就会自己去调用

有了App，也就有了directive,就可以自定义指令了；这里自定义resize指令，会有mounted声明周期，去调用directive中的四个参数，这里只需要前两个，el 和 binding就不过多介绍了，前面的文章有说明；

const install = (app:App) => {
  app.directive('resize', {
    mounted(el, binding) {
      useResize(el, binding.value)
    }
  })
}

最后来注册一下，导出这个函数功能

useResize.install = install
export default useResize

vite 打包

在vite.config.ts中定义，导入vite,用vite中defineConfig的方法，去定义bind，在 vite官网，找到库模式，使用lib的配置项

在lib下有三个属性

entry 入口路径
name 入口名称
fileName 文件的名称

rollupOptions 是做一个透传属性，默认会打有点UMD和Es module，打包就已经做好了，属入npm run build就开始打包了，注意需要node版本16以上，这里会打包两个js文件，一个是mjs，就是es module模式，一个就是umd格式的文件

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'useResize'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          useResize: "useResize"
        }
      }
    }
  }
})

如何发布到npm

ts声明文件还没有做，声明一下useResize传入的el 和 callback,以及install方法

declare const useResize: {
  (el:HTMLElement, callback: Function):void;
  install: (app: APP) => void;
}

export default useResize

发布到npm，需要在配置一下package.json,在main中配置一下，这个一般是我们这个require找我们的目录dist,找到umd.js,UMD他是支持中国common js规范的；

 "main": "dist/szb.umd.js",

在配置一个module,去找dist下面的mjs文件

"module": "dist/szb.mjs",

配置files,需要发布那些文件，不需要就不发了

   "files": [
        "dist",
        "index.d.ts"
    ],

version这个是配置版本号的

"version": "1.0.0",

发布npm有三步

需要npm账户，没有去官网注册一下或者npm adduser这样添加也可以
npm login去登陆一下
npm publish发布

最后可以在npm官网找到自己上传的包，项目也可以使用，npm i xxx安装自己的依赖包

hook和自定义指令实现监听dom宽高的变化以及如何发布到npm