babel-plugin-buried-point
v1.0.5
Published
可以通过在函数或方法前面添加埋点方法注释,例如:
Downloads
2
Readme
适用于React的自动插入埋点函数(埋点触发函数需要自己添加到全局下)
可以通过在函数或方法前面添加埋点方法注释,例如:
class User extends Component {
/*@buried setBuried({module: '用户中心', action: '点击'})*/
handleOnClick = () => {
doSomething();
}
render() {
return (
<span onClick={this.handleOnClick}>点我触发埋点</span>
)
}
}
=>
class User extends Component {
handleOnClick = () => {
setBuried({module: '用户中心', action: '点击'});
doSomething();
}
render() {
return (
<span onClick={this.handleOnClick}>点我触发埋点</span>
)
}
}
webpack打包时,就会在babel-loader解析转换过程中自动把setBuried({module: '用户中心', action: '点击'})
插入到函数或方法体的头部。
由于code经过babel转换成jsx后结构变化会找不到对应节点的路径,所以babel-plugin-buried-point需要优先被执行(babel-loader 的 plugin配置执行顺序从左往右即从前往后);
自定义配置 -- .buried文件
@buried
作为埋点函数的默认识别标志,可自定义调整,只需在根目录的.buried文件中配置对应的key即可。
另外在开发环境或别的场景不想要插入埋点函数,可以配置debugRules,符合key === value条件下会替换成console.log({module: '用户中心', action: '点击'})
插入。
// .buried
{
"key": "$configKey",
"debugRules": [
{
"key": "process.env.NODE_ENV",
"value": "development"
}
]
}
该配置下,代码转换前后对比如下:
/*$configKey setBuried({module: '用户中心', action: '点击'})*/
handleOnClick = () => {
doSomething();
}
=>
handleOnClick = () => {
if(process.env.NODE_ENV === "development") {
console.log({module: '用户中心', action: '点击'});
} else {
setBuried({module: '用户中心', action: '点击'});
}
doSomething();
}