1.0.5 • Published 3 years ago

babel-plugin-buried-point v1.0.5

Weekly downloads
1
License
ISC
Repository
-
Last release
3 years ago

适用于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();
}