需求

实现一个函数同时支持 hook 和 自定义指令 去监听dom宽高的变化

5w3h 八何分析法

1. 如何监听 dom 宽高变化

2. 如何用 vite 打包库

3. 如何发布 npm

注意：修改后，记得重新打包后，再发布

搭建项目环境

pnpm init
tsc --init
pnpm i -D vue vite

创建 hook 函数

// interSectionObserver 主要侦听元素是否在视窗内
// MutationObserver 主要侦听子集的变化还有属性的变化以及增删改差
// ResizeObserver 主要侦听元素宽高的变化
import type { App } from 'vue';

function useResize(el: HTMLElement, callback: Function) {
  let resize = new ResizeObserver(entries => {
    // entries数组可以侦听多个元素，这里只监听一个就可以
    // Rect: rectangle 矩形, contentRect存储着宽和高
    callback(entries[0].contentRect);
  });

  resize.observe(el);
}

// 自定义指令
const install = (app: App) => {
  app.directive('resize', {
    mounted(el, binding) {
      // binding.value 就是回调函数
      useResize(el, binding.value);
    },
  });
};

useResize.install = install;

export default useResize;

声明文件

打包库

在 vite.config.ts 中配置

import { defineConfig } from 'vite';

// umd 支持 adm cmd cjs 全局变量模式
export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'useResize',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          useResize: 'useResize',
        },
      },
    },
  },
});

package.json中添加打包指令"build": "vite build"

{
  "name": "v-resize-nb",
  "version": "0.0.2",
  "description": "",
  "main": "dist/v-resize-nb.umd.js", // required 会访问到这文件
  "module": "dist/v-resize-nb.mjs", // import 会访问到此文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build"
  },
  "keywords": [],
  "author": "",
  "files": ["dist", "index.d.ts"], //发布的文件
  "license": "ISC",
  "devDependencies": {
    "vite": "^5.2.6",
    "vue": "^3.4.21"
  }
}

发布 npm

  npm adduser # 没有npm账号，需要先注册
  npm login # 登录npm账号
  npm publish # 发布