需求

实现一个函数同时支持 vue3的 自定义hook 和 自定义指令 去监听dom宽高的变化 5w3h 八何分析法

1. 如何监听dom宽高变化
2. 如何用vite把这个文件打包成一个库
3. 如何发布到npm

步骤：

1. npm init -y # 生成package.json
2. npm install -g typescript # 安装成功就可以使用 tsc 命令
3. tsc --init # 生成 tsconfig.json
4. 新建 vite.config.js 配置文件
5. 新建 index.d.ts 声明文件
6. npm i vue -D # 默认安装最新版 vue3，-D 安装到 dependencies 生产和开发
7. npm i vite -D

插件写完，如何打包成一个库? vite官网 - 指引 - 构建生产版本 - 库模式

1. 先去 vite.config.js 配置
2. 添加一个打包命令： "build":"vite build"
3. 打包：npm run build # 根目录下出现 dist 目录，含 项目名.mjs + 项目名.umd.js 两个文件
4. 书写声明文件 index.d.ts
5. 去 package.json 里配置 ① 重新配置 "main" 的路径为 dist 目录下的 umd.js文件。 umd是支持nodjs的commonjs规范的，require 会去找这个 main 对应的路径。 ② 加一个 "module" 配置，路径为 dist 目录下的 .mjs文件。 import 和 export 就会去找这个 module 对应的路径 ③ 加一个 "files" 配置，这是往npm上发的目录，根目录下的文件不可能都发上去。 要发build编译后的产物 dist 和 声明文件index.d.ts ④ 注意是否已经发布过，是否需要修改版本号 "version"
6. 发布到 npm ，需要有 npm 账号，可以开通一个账号： npm adduser 报错：npm ERR! Unexpected token < in JSON at position.... 原因：设置了国内镜像，需改为官网：npm config set registry=http://registry.npmjs.org 重新注册：npm adduser 账号：born.to.like，密码：borntolike 登录：npm login 发布：npm publish