Babel的原理
随着前端工程化的兴起,让我们接触了更多的语言工具,babel在这就是一种特有的工具。
我们通常对babel的理解就是它可以帮助我们去处理兼容性,也就是有些JavaScript的新特性,可能我们想去使用,但对于某些浏览器来说还并未支持,此时我们就可以通过babel 将我们的代码降级处理为浏览器兼容的执行版本从而达到开发和生产环境两套代码,一次操作的便捷开发。
Babel插件就是作用于抽象语法树
Babel三个主要的处理步骤就是解析(parse),转换(transform),生成(generate)。
解析
解析就相当于我们的编译过程中的词法分析和语法分析的结合版,将代码解析成抽象语法树(AST),每个js引擎(比如Chrome浏览器中的V8引擎)都有自己的AST解析器,而Babel是通过Babylon实现的。解析过程有两个阶段:词法分析和语法分析,词法分析阶段把字符串形式的代码转换为令牌(tokens)流,令牌类似于AST中节点;而语法分析阶段则会把一个令牌流转换成 AST的形式,同时这个阶段会把令牌中的信息转换成AST的表述结构。
转换
转换这个步骤一般来说就是暴漏给我们的处理步骤,将在此阶段对节点进行添加、更新以及移除操作。通过traverse进行深度优先遍历,维护AST树的整体状态,并且可完成对其的替换、删除或者增加节点。返回的结果就是我们处理后的AST。
生成
生成阶段就是将我们二阶段的最终AST进行转换,转换成我们的字符串形式的代码,并且创建代码映射,也就是source-map。代码生成就是,先对整个AST进行深度遍历,再通过generate转换为可以表示转换后代码的字符串。
常用的埋点方法
1、写入方法,并以指令的形式绑在dom节点上,进行传参和捕获
2、借助第三个平台的sdk来实现埋点,但扩展性差
3、在dom节点上绑定特定的标识,递归便利整个dom节点上的标识来实现埋点数据的补货
4、通过description修饰器,依次寻找在钩子函数中 (activated - created - mounted) 依次寻找这三个钩子如果存在就会增加埋点 VIEW
个人实现的基于babel的埋点实例及思考
基于babel根据注释自动生成埋点方法的插件源码,以日常开发的埋点需求为导向,处理了埋点的常用场景
插件的主要的功能有
1、根据注释自动在函数首行添加埋点
2、根据注释中的参数,向埋点代码中进行传参;
插件核心代码

引入方法



使用方法

结果演示
