小满 前端埋点SDK 带你 从0 开发 并且发布npm
埋点就是 数据采集-数据处理-数据分析和挖掘,如用户停留时间,用户哪个按钮点的多,等
技术架构使用ts + rollup
使用ts主要是在编译过程中发现问题,减少生产代码的错误,
使用rollup 应为 rollup打包干净,而webpack非常臃肿,可读性差,所以rollup非常适合开发SDK和一些框架,webpack 适合开发一些项目
1.目录结构设计

2.安装开发依赖
3.配置rollup config js
4. src type 定义类型
5.src core 核心功能
PV:页面访问量,即PageView,用户每次对网站的访问均被记录
主要监听了 history 和 hash
history 无法通过 popstate 监听 只能重写其函数 在utils/pv
hash 使用hashchange 监听
UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客
用户唯一表示 可以在登录之后通过接口返回的id 进行设置值 提供了setUserId
也可以使用canvas 指纹追踪技术 指纹视频
本章重点 navigator.sendBeacon
为什么要使用这个去上报
这个上报的机制 跟 XMLHttrequest 对比 navigator.sendBeacon 即使页面关闭了 也会完成请求 而XMLHTTPRequest 不一定
DOM事件监听
主要是给需要监听的元素添加一个属性 用来区分是否需要监听 target-key
6.工具函数 src/utils/pv
7.设置package json
main module 分别设置对应的js文件
files 设置打包之后的目录 我这儿是dist 具体看rollup config .js
8.发布npm
tips:一定要使用npm 的源 不能使用淘宝镜像 否则 报错403
1.npm adduser
用户名 密码 邮箱 邮箱验证码

2. npm login
输入刚才的 用户名 密码 邮箱 验证码
3.npm publish 发布
发布的时候403 有可能是名字重复注意一下

4.npm 官网查看
https://www.npmjs.com/package/zmy-tracker
