1.0.0 • Published 8 months ago

hook-npm v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

需求

实现一个函数同时支持 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

1.0.0

8 months ago