vue之babel自动埋点

公司项目是vue单页面技术,这天组长对我说,为了凸显我们的作用,做点外行或者新手看起来高深的东西,例如自动埋点。
当时我的表情先是在这里插入图片描述
然后摸鱼摸习惯了,就是这种状态。
在这里插入图片描述
最后组长说领导的态度决定我们的绩效,没办法,为了money,无奈打开了老朋友——google。

搜索自动埋点,果然——现成的劳动果实,真香!

原文: 手撸自动埋点.
给作者点个赞!!!
不过用于我们的项目有几个要改动的地方:

在这里插入图片描述

在这里插入图片描述
这里如果参数错误就跳过的写法对于我们来说不合适,所以给注释了。

在这里插入图片描述
在这里插入图片描述
这里的路径要兼容一下,报错原因小白看不懂(别装小白)。
在这里插入图片描述

在这里插入图片描述

因为是vue项目,babel-loader处理的是项目下所有的.js文件
在这里插入图片描述
所以我有了下面的操作:
在这里插入图片描述
在这里插入图片描述
可悲哀的发现好像一点效果没有。。。
在这里插入图片描述
大佬写的代码是没问题的,于是我尝试在.babelrc中写入,于是有了下面的操作:
在这里插入图片描述
结果成功了?!!
在这里插入图片描述
张三表示很欣慰!
在这里插入图片描述
为此本人做了总结:这是babel插件,当然得写在babel相关的里面了,而.babelrc正是处理.vue文件的js的。
咳咳,至于插件的开发过程,原文写的很详细,插件源码,举例都有,感谢原文作者的奉献。
在这里插入图片描述
至于我的源码,不给!(我才不是懒得上传)
最后,下班。

猜你喜欢

转载自blog.csdn.net/weixin_44265066/article/details/122732325