通过注释来埋点

目录

开始

插件编写

功能一

功能二

功能三

合并功能

运行代码

总结


这篇文章主要讲如何根据注释,通过babel插件自动地,给相应函数插入埋点代码,在实现埋点逻辑和业务逻辑分离的基础上,配置更加灵活

这篇文章想要达到的效果:
源代码:

//##箭头函数
//_tracker
const test1 = () => {};const test1_2 = () => {};

转译之后:

import _tracker from "tracker";
//##箭头函数
//_tracker
const test1 = () => {_tracker();
};const test1_2 = () => {};

代码中有两个函数,其中一个//_tracker的注释,另一个没有。转译之后只给有注释的函数添加埋点函数。
要达到这个效果就需要读取函数上面的注释,如果注释中有//_tracker,我们就给函数添加埋点。这样做避免了僵硬的给每个函数都添加埋点的情况,让埋点更加灵活。

下面让我们来看看怎么做

开始

准备babel入口文件index.js

const { transformFileSync } = require("@babel/core");
const path = require("path");
const tracker = require("./babel-plugin-tracker-comment.js");const pathFile = path.resolve(__dirname, "./sourceCode.js");//transform ast and generate code
const { code } = transformFileSync(pathFile, {plugins: [[tracker, { trackerPath: "tracker", commentsTrack: "_tracker" }]],
});console.log(code);

这里我们使用transformFileSyncAPI转译源代码,并将转译之后的代码打印出来。过程中,将手写的插件作为参数传入plugins: [[tracker, { trackerPath: "tracker", commentsTrack: "_tracker"}]]。除此之外,还有插件的参数

  • trackerPath表示埋点函数的路径,插件在插入埋点函数之前会检查是否已经引入了该函数,如果没有引入就需要额外引入。

  • commentsTrack标识埋点,如果函数前的注释有这个,就说明函数需要埋点。判断的标识是动态传入的,这样比较灵活

入口文件准备好了,接下来准备下源代码文件sourceCode.js

import "./index.css";//##箭头函数
//_tracker
const test1 = () => {};const test1_2 = () => {};//函数表达式
//_tracker
const test2 = function () {};const test2_1 = function () {};// 函数声明
//_tracker
function test3() {}function test3_1() {}

这里准备了三种不同的函数类型,并且各个函数类型都有一个加了注释,另一个没加作为参照对象
就差插件了,下面写插件代码babel-plugin-tracker-comment.js

插件编写

功能一

功能实现过程中,涉及到了读取函数的注释,并且判断注释中是否有//_tracker

const leadingComments = path.get("leadingComments");
const paramCommentPath = hasTrackerComments(leadingComments, options.commentsTrack);//函数实现
const hasTrackerComments = (leadingComments, comments) => {if (!leadingComments) {return null;}if (Array.isArray(leadingComments)) {const res = leadingComments.filter((item) => {return item.node.value.includes(comments);});return res[0] || null;}return null;
};

具体函数实现,接收函数前的注释,注释可能会有多个,所以需要一一判断。还接受埋点的标识。如果找到了含有注释标识的注释,就将这行注释返回。否则一律返回null,表示这个函数不需要埋点

那什么是多个注释?

这个很好理解,我们看下AST explorer[2]就知道了

a函数,前面有4个注释,三个行注释,一个块注释。
其对应的AST解析是这样的:


AST对象中,用leadingComments表示前面的注释,用trailingComments表示后面的注释。leadingComments中确实有4个注释,并且三个行注释,一个块注释,和代码对应上了。
函数要做的就是将其中含有//_tracker的comment path对象找出来

功能二

判断函数确实需要埋点之后,就要开始插入埋点函数了。但在这之前,还需要做一件事,就是检查埋点函数是否引入,如果没有引入就需要额外引入了

const { addDefault } = require("@babel/helper-module-imports");if (paramCommentPath) {//add Importconst programPath = path.hub.file.path;const importId = checkImport(programPath, options.trackerPath);state.importTackerId = importId;
}//函数实现
const checkImport = (programPath, trackPath) => {let importTrackerId = "";programPath.traverse({ImportDeclaration(path) {const sourceValue = path.get("source").node.value;if (sourceValue === trackPath) {const specifiers = path.get("specifiers.0");importTrackerId = specifiers.get("local").toString();path.stop();}},});if (!importTrackerId) {importTrackerId = addDefault(programPath, trackPath, {nameHint: programPath.scope.generateUid("tracker"),}).name;}return importTrackerId;
};

拿到import语句需要program节点。checkImport函数的实现就是在当前文件中,找出埋点函数的引入。寻找的过程中,用到了引入插件时传入的参数trackerPath。还用到了traverseAPI,用来遍历import语句
如果找到了引入,就获取引入的变量。这个变量在之后埋点的时候需要。即如果引入的变量命名了tracker2,那么埋点的时候埋点函数就是tracker2
如果没有引入,就插入引入。

addDefault就是引入path的函数,并且会返回插入引用的变量。

功能三

确定好了函数需要埋点,并且确定了埋点函数引入的变量,接下来就插入函数了。

if (paramCommentPath) {//add Importconst programPath = path.hub.file.path;const importId = checkImport(programPath, options.trackerPath);state.importTackerId = importId;insertTracker(path, state);
}
const insertTracker = (path, state) => {const bodyPath = path.get("body");if (bodyPath.isBlockStatement()) {const ast = template.statement(`${state.importTackerId}();`)();bodyPath.node.body.unshift(ast);} else {const ast = template.statement(`{${state.importTackerId}();return BODY;}`)({ BODY: bodyPath.node });bodyPath.replaceWith(ast);}
};

在生成埋点函数的时候,就用到了之前获取到的埋点函数的变量importTackerId。还有在实际插入的时候,要区分函数体是一个Block,还是直接返回的值--()=>''

合并功能

三个功能都写好了,接下来将三个功能合起来,就是我们的插件代码了

const { declare } = require("@babel/helper-plugin-utils");
const { addDefault } = require("@babel/helper-module-imports");
const { template } = require("@babel/core");//get comments path from leadingComments
const hasTrackerComments = (leadingComments, comments) => {if (!leadingComments) {return false;}if (Array.isArray(leadingComments)) {const res = leadingComments.filter((item) => {return item.node.value.includes(comments);});return res[0] || null;}return null;
};//insert path
const insertTracker = (path, param, state) => {const bodyPath = path.get("body");if (bodyPath.isBlockStatement()) {const ast = template.statement(`${state.importTackerId}(${param});`)();bodyPath.node.body.unshift(ast);} else {const ast = template.statement(`{${state.importTackerId}(${param});return BODY;}`)({ BODY: bodyPath.node });bodyPath.replaceWith(ast);}
};//check if tacker func was imported
const checkImport = (programPath, trackPath) => {let importTrackerId = "";programPath.traverse({ImportDeclaration(path) {const sourceValue = path.get("source").node.value;if (sourceValue === trackPath) {const specifiers = path.get("specifiers.0");importTrackerId = specifiers.get("local").toString();path.stop();}},});if (!importTrackerId) {importTrackerId = addDefault(programPath, trackPath, {nameHint: programPath.scope.generateUid("tracker"),}).name;}return importTrackerId;
};module.exports = declare((api, options) => {console.log("babel-plugin-tracker-comment");return {visitor: {"ArrowFunctionExpression|FunctionDeclaration|FunctionExpression": {enter(path, state) {let nodeComments = path;if (path.isExpression()) {nodeComments = path.parentPath.parentPath;}// 获取leadingCommentsconst leadingComments = nodeComments.get("leadingComments");const paramCommentPath = hasTrackerComments(leadingComments,options.commentsTrack);//查看作用域中是否有——trackerParam// 如果有注释,就插入函数if (paramCommentPath) {//add Importconst programPath = path.hub.file.path;const importId = checkImport(programPath, options.trackerPath);state.importTackerId = importId;insertTracker(path, state);}},},},};
});

在获取注释的时候,代码中并不是直接获取到pathleadingComments,这是为什么?
比如这串代码:

//_tracker
const test1 = () => {};

我们在函数中遍历得到的path是()=>{}ast的path,这个path的leadingComments其实是null,而想要获取//_tracker,我们真正需要拿到的path,是注释下面的变量声明语句。所以在代码中有判断是否为表达式,如果是,那就需要先parentPath,得到赋值表达式path,然后在parentPath,才能拿到变量声明语句

运行代码

node index.js

得到输出:

总结

这篇文章写了如何根据函数上方的注释,选择性的给函数埋点。过程详尽,例子通俗易懂,真是不可多得的一篇好文章啊
有任何问题,欢迎金友们留言评论哦~

相关文章:

  1. 通过工具babel,给函数都添加埋点[4]

  2. 通过工具babel,给埋点函数传递参数[5]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/144112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

非原始值的响应式方案

实际上,实现响应式数据要比想象中难很多,并不是单纯地拦截get/set 操作即可。举例来说,如何拦截 for…in 循环?track 函数如何追踪拦截到的 for…in 循环?类似的问题还有很多。除此之外,我们还应该考虑如何…

Stm32_标准库_18_串口蓝牙模块_手机与蓝牙模块通信_控制LED灯亮灭

通过输入LED_ON和LED_OFF分别控制LED灯的亮与灭 接线: LED的正极接正电,负极接GPIOA_Pin1 蓝牙模块TXD接GPIOA_Pin3,VCC接正电,GND接负电 注意:USART2是APB1外设,汉字占用字节数是字符的两倍 使用: 手…

2023最受推荐的五款项目管理工具

1、进度猫 进度猫是国内一款轻量级项目管理工具,适用于实时协作的团队。 以甘特图为向导,基于任务清单todolist,支持多用户协作; 甘特图显示具体任务清单、时间和任务的进度; 对未完成任务、已完成任务进行分类管…

WPF中的虚拟化是什么

WPF(Windows Presentation Foundation)中的虚拟化是一种性能优化技术,它主要用于提高大量数据展示的效率。在WPF中,如果你有一个包含大量项的ItemsControl(例如ListBox、ListView或DataGrid等),…

Vue3源码reactive和readonly对象嵌套转换,及实现shallowReadonly

前言 官方文档中对reactive的描述: 响应式转换是“深层”的:它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性,同时保持响应性。 官方文档中对readonly的描述: 只读代理是深层的:对任何嵌套属性的访问都将是…

[vim]Python编写插件学习笔记2 - 分离

0 环境 Windows 11 22H2gVim82 (D:/ProgramFiles/Vim)Python311 (D:/ProgramFiles/Python311)Vundle v0.10.2 阅读本文前,需要先了解前文: 《[vim]Python 编写插件学习笔记1 - 开始》 1 Python 与 vimscript 分离 前文编写 vim 插件的方式,是将 Pyt…

局域网靶机渗透操作指南

一、背景 在网络环境复杂的当下,我们努力做一个清醒且明白的个人,在个人信息维护的时候可以更加有针对性,当前网络环境各方势力都对我们虎视眈眈,再这样的环境中一方面我们要避免成为黑暗的一面,但另一方面我们要了解…

深入了解域名与SSL证书的关系

在如今数字化的世界里,网络安全成为我们关注的重要议题之一。为了确保数据在网络上传输的安全性,我们通常会采取各种安全措施,其中最常用的就是SSL证书。然而,很多人并不了解SSL证书是如何与域名相互关联的。 首先,我…

Oxygen XML Editor 26版新功能

▲ 搜索“大龙谈智能内容”关注GongZongHao▲ 2023年10月26日,罗马尼亚SyncRO Soft公司发布Oxygen XML Editor、Oxygen Web Author和Oxygen Publish Engine 26版本。 1. Oxygen XML Editor 26新功能简介 AI助手 帮助写作者通过执行重复任务、审查语法、生成结构…

[C/C++] 数据结构 链表OJ题:相交链表(寻找两个链表的相交起始结点)

题目描述: 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 图示两个链表在节点 c1 开始相交: 题目数据 保证 整个链式结构中不存在环。 注意,函数返…

HTML简单介绍

且视他人之疑目如盏盏鬼火,大胆地去你的夜路。 目录 1.网页 2.Web标准 3.HTML 3.1HTML结构 3.2HTML标签​编辑 4.标签介绍 4.1排版标签 4.2文本格式化标签 4.3媒体标签 4.3.1图片标签 4.3.2 音频标签 4.3.3视频标签 5.相对路径 6.链接标签 6.1target属…

爬取动态网页内容的库

爬取动态网页内容时,传统的 Python 爬虫库(如 Requests、BeautifulSoup)可能无法直接获取 JavaScript 动态生成的内容。为了处理这种情况,你可以使用一些特别设计的库,它们能够模拟浏览器行为,执行 JavaScr…

图论15-有向图-环检测+度数+欧拉回路

文章目录 1. 有向图设计1.1 私有变量标记是否有向1.2 添加边的处理,双向变单向1.3 删除边的处理,双向变单向1.4 有向图的出度和入度 2 有向图的环检测2.1 普通的算法实现换检测2.2 拓扑排序中的环检测 3 欧拉回路 1. 有向图设计 1.1 私有变量标记是否有…

燃气管网监测系统|全面保障燃气安全

根据新华日报的报道,2023年上半年,我国共发生了294起燃气事故,造成了57人死亡和190人受伤,燃气事故的发生原因有很多,其中涉及到燃气泄漏、设备故障等因素。因此,加强燃气安全管理,提高城市的安…

在 Kubernetes 上运行 Elasticsearch

Kubernetes(快速)入门 Kubernetes 是一种容器编排技术,这只是一种奇特的说法,它可以帮助您管理和运行打包的应用程序。它基本上看起来像这样: 库伯内特斯架构 Kubernetes 基本架构 您的应用程序(例如博客软…

vue、react中虚拟的dom

React中虚拟DOM的例子: 下面是一个使用React创建的简单的计数器组件: import React, { Component } from react;class Counter extends Component {constructor(props) {super(props);this.state {count: 0};}handleClick () > {this.setState({c…

httpClient超时时间详解与测试案例

使用httpclient作为http请求的客户端时,我们一般都会设置超时时间,这样就可以避免因为接口长时间无响应或者建立连接耗时比较久导致自己的系统崩溃。通常它里面设置的几个超时时间如下: RequestConfig config RequestConfig.custom().setCo…

电磁场与电磁波part1--矢量分析

目录 1、方向导数 2、散度定理(高斯定理) 3、散度与旋度的比较 4、旋度定理(斯托克斯定理) 5、关于点乘、叉乘、梯度、散度、旋度的计算 ~~~~~~~~~~~~~~~~~~~~~~~~ 确认过眼神,是我看不懂的 ~~~~~~~~~~~~~~~~…

IDEA没有Add Framework Support解决办法

点击File—>Settings 点击第一个设置快捷键 点击apply和ok即可 我们要点击一下项目,再按快捷键ctrlk 即可