@wuipkg/auto-track

面向 Vue (含 SFC 及 setup tsx) 生态的基于抽象语法树转换（AST Mutation）底层能力打造的双向无缝构建阶埋点自动化埋植插入工具。

安装

pnpm install @wuipkg/auto-track

功能核心应用介绍

主要由 ./vite 层对外提供了一个通过基于 AST 和魔法字符串去修改业务节点、埋下特殊标志的 Vite 构建配置原生绑定能力插件(autoTrackPlugin)。 它会在工程每次研发预编译及正式编译打包分析中顺次拦截包含目标追踪标记项形态范围的源码行，并静默为其分配注入加密散列化且具有绝对确定指向特征的前缀化追踪序号标识并改写原文件本体保存，从而完成追踪标记溯源基建埋设工作。

插件传参配设 (PluginOptions)

| 参数声明 | 参数类型 | 默认行为 | 能力说明 | | --- | --- | --- | --- | | attrName | string | 'data-track' | 定义并作为属性挂载及落地的追踪节点 Attribute 标记字段名。 | | elements | string[] | ['button'] | 提供识别及打入标记追踪埋点的目标范围元素映射集 (可以写入标准 DOM 比如 div, 以及自建库 VNode 如 van-button)。 | | trackPrefix | string | '' | 覆盖分配向被注入的特定 Hash 字符串或 UUID 之前的附加前嵌串。（如针对某子应用专门挂设特定的 'sub_A_click_'）。 | | formatFile / format | string | - | 提供回调能力接口：允许在 AST 切除置换使得代码间距对齐出现脏块排版后（触发了 buildEnd），交接唤醒命令行脚本，通常设为例如 npx prettier --write {files}。 |

使用步骤与标准接装范例

通过在项目的构件层底座（例如 vite.config.ts）上进行下沉集成操作：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoTrackPlugin from '@wuipkg/auto-track/vite'

export default defineConfig({
  plugins: [
    vue(),
    autoTrackPlugin({
      // 业务应用想绑定的属性标志：如绑定在DOM后读取该属性记录流水
      attrName: 'data-my-event-track', 
      
      // 指明在什么元素层出现就需要强加监控追踪位
      elements: ['button', 'VanButton', 'MyCardItem'], 
      
      // 生成的数据结构带有指定的命名空间前首
      trackPrefix: 'clk_auth_sys_',
      
      // 可供调用去格式化由修改导致原本规范变脏的文件，防止和 Lint CI/CD 流程相碰撞排斥
      format: 'npx eslint --fix {files}' 
    })
  ]
})

配合上方使用后，假如开发时项目内有如下待构件源码代码片段：

<!-- index.vue -->
<template>
  <button @click="doSomething">提交动作</button>
</template>

在保存被识别捕获后，本地的源代码将被原处持久化改写落盘变动为：

<!-- 变更后的原处文件即时结果 -->
<template>
  <button data-my-event-track="clk_auth_sys_1a2b3c4d5e" @click="doSomething">提交动作</button>
</template>