需求

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

5WH八何分析法 what 产品背景、需求的由来 when 要在什么时间完成 where 作用在什么位置和场景 who 目标用户是谁 why 为什么要做这个需求 how 你打算怎么去解决它

1. 如何监听dom宽高变化
2. 如何使用vite打包库
3. 如何发布npm

项目准备步骤

1. 用 pnpm init 生成 package.json
2. 用 tsc --init 生成 tsconfig.json
3. 在最外层新建一个 vite.config.ts
4. 在最外层新建一个 index.d.ts
5. 使用pnpm安装 vite 和 vue,使用额外配置命令 -D，将2个插件安装到devDependencies中 pnpm i vite vue -D

打包并发布插件

1. 配置vite.config.ts的构建函数，具体请上vite官方文档，选择配置-构建选项-右边的build.lib-库模式,构建函数
2. 配置package.json的 main和module
3. 配置package.json的 files，指定要发布到npm服务器上的目录
4. 在终端输入npm adduser注册账号，如果已经注册过了，可以忽略该步骤，也可以前往NpmJs官网进行注册
5. 在终端输入npm login登录账号,如果提示npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog的错误，需要在终端执行npm set registry=https://registry.npmjs.org/,将npm的注册表地址从默认的http修改成https
6. 在终端输入 npm publish 发布组件到npmJs上

注解

1. devDependencies 是指开发环境下需要的依赖项，例如构建工具、测试框架、代码风格检查工具等。这些依赖项通常在开发过程中使用，但在实际部署或生产环境中不需要。
2. dependencies 是指项目运行或生产环境下需要的依赖项，例如应用程序的核心库、框架、数据库驱动程序等。这些依赖项是项目正常运行所必需的。
3. 通常，devDependencies 中的依赖项会被开发人员在开发过程中安装和使用，而 dependencies 中的依赖项会随项目一起打包或部署到生产环境中。
4. main 字段用于指定 CommonJS 规范的入口文件路径，通常是一个 JavaScript 文件。当其他项目使用你的包时，会默认加载该入口文件。umd支持commonJs
5. module 字段用于指定 ES 模块规范的入口文件路径，通常是一个 ECMAScript 模块（ESM）文件。当在支持 ES 模块的环境中引入你的包时，会优先加载该入口文件。 mjs支持ES模块

UMD (Universal Module Definition):

1. UMD 是一种通用的模块定义规范，兼容多种环境（如浏览器、Node.js 等）。
2. UMD 模块可以以不同的方式加载：可以作为全局变量直接使用，也可以通过 CommonJS 或 AMD 规范进行导入。
3. UMD 文件通常使用 .js 扩展名。
4. UMD 模块支持 amd cmd cjs 全局变量等方式导入

MJS (ECMAScript Modules):

1. MJS 是 ECMAScript 模块的文件扩展名，用于支持 ES 模块规范。
2. MJS 模块使用 import 和 export 语法进行模块导入和导出。
3. MJS 文件通常使用 .mjs 扩展名，以与传统的 JavaScript 文件区分开来。

UMD和MJS的主要区别：

1. UMD 是一种通用的模块定义规范，可在不同环境中使用，而 MJS 是针对 ECMAScript 模块规范的扩展。
2. UMD 文件可以在浏览器和 Node.js 等环境中直接加载和使用，而 MJS 文件需要在支持 ES 模块的环境中加载。
3. 需要根据具体的使用场景和需求选择适合的模块规范和文件扩展名。在浏览器端使用时，UMD 是一种常见的选择，而在 Node.js 或现代 JavaScript 项目中，可以使用 MJS 文件来利用 ES 模块的特性。