需求

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

步骤

1、实现监听dom宽高变化的方法

• 通过pnpm init 初始化项目-生成package.json文件
• 通过tsc --init 生成ts的支持和配置文件
• 新建一个vite.config.ts配置文件
• 新建一个index.d.ts 用于编写申明文件
• 安装vue库 pnpm add vue -D，添加-D指令，表示安装在开发环境；因为一般项目中都会引入vue3
• 安装vite环境 pnpm add vite -D
• 在index.ts中实现监听的方法

2、使用vite打包成为一个库

• vite.config.ts中配置打包信息

配置参考：https://vitejs.cn/vite3-cn/guide/build.html#library-mode

import {defineConfig} from "vite";

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

• package.json中配置打包指令

"build": "vite build"

• pnpm run build 打包完后会发现在项目中出现dist目录为已经打包的结果

3、发布到npm

• 编写声明文件
• 修改package.json文件发布
  • main： 修改为发布的umd.js文件
  • module: 修改为发布的mjs文件
  • 发布的文件files： dist目录和声明文件

"main": "dist/V-RESIZE-LWS.umd.js",
  "module": "dist/V-RESIZE-LWS.mjs",
  "files": [
    "dist",
    "index.d.ts"
  ],

• 发布
  • 注册npm账号： npm adduser
  • 登录npm账号
  • npm publish发布即可