Continue with the previous post: https://www.cnblogs.com/Answer1215/p/12337243.html

What we want to do in this post, is adding parent function name into the console log as well:

Previous output is :

function add(a, b) {
console.log("2:4", a, b)
return a + b
} function subtract(a, b) {
console.log("7:4", a, b)
return a - b
} add(, )
subtract(, )
console.log("13:0", 'sup dawg')

Now we want:

function add(a, b) {
console.log("add 2:4", a, b)
return a + b
} function subtract(a, b) {
console.log("subtract 7:4", a, b)
return a - b
} add(, )
subtract(, )
console.log("13:0", 'sup dawg')

The key is using

path.findParent()

+

t.isFunctionDeclaration

To find its parent function.

Code:

export default function (babel) {
const { types: t } = babel; return {
name: "ast-transform", // not required
visitor: {
CallExpression(path) {
if (!looksLike(path.node, {
callee: {
type: 'MemberExpression',
object: {
name: 'console'
},
property: {
name: 'log'
}
}
})) {
return
} const parentFn = path.findParent(t.isFunctionDeclaration);
const fnName = parentFn?
`${parentFn.node.id.name} `:
'';
// insert string into console.log('instread here', a,b)
const {line, column} = path.node.loc.start;
const prefix = fnName + `${line}:${column}`;
path.node.arguments.unshift(t.stringLiteral(prefix))
}
}
};
} function looksLike(a, b) {
return (
a &&
b &&
Object.keys(b).every(bKey => {
const bVal = b[bKey]
const aVal = a[bKey]
if (typeof bVal === 'function') {
return bVal(aVal)
}
return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal)
})
)
} function isPrimitive(val) {
return val == null || /^[sbn]/.test(typeof val)
}

[AST Babel] Add function name into the console log 'path.findParent(t.isFunctionDeclaration)'的更多相关文章

  1. [AST Babel Plugin] Transform code, add line:column number for console log

    For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...

  2. [AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression

    Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html Now we need to think ...

  3. javascript精雕细琢(四):认亲大戏——通过console.log彻底搞清this

    目录 引言 代码在前 1.function下的this 2.箭头函数下的this 结语 引言        JS中的this指向一直是个老生常谈,但是新手又容易晕的地方.我在网上浏览了很多帖子,但是发 ...

  4. IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行

    问题来源:外网IE下,触发js报错.经检测,未清除console造成.清除console后,解决. 问题原因:console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebug ...

  5. return console.log()结果为undefined现象的解答

    console.log总是出现undefined--麻烦的console //本文为作者自己思考后总结出的一些理论知识,若有错误,欢迎指出 bug出现 ​ 需求如下:新建一个car对象,调用其中的de ...

  6. for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); };答案:4 4 4。

    看面试题时,发现了一道较为经典的面试题,代码如下 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); }; / ...

  7. [Javascirpt AST] Babel Plugin -- create new CallExpression

    The code we want to trasform: 2 ** 3; a ** b; a **b * c; a ** b ** c; (a+1) ** (b+1); transform to: ...

  8. console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析

    console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...

  9. for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}

    for(var i=0;i<=3;i++){ setTimeout(function() {  console.log(i)  }, 10);} 答案:打印4次4 这道题涉及了异步.作用域.闭包 ...

随机推荐

  1. RabbitMQ的五种工作方式详细

    在了解之前得先有个RabbitMQ客户端.官网: https://www.rabbitmq.com/getstarted.html connections:无论生产者还是消费者,都需要与RabbitM ...

  2. Android View框架的draw机制

    概述 Android中View框架的工作机制中,主要有三个过程: 1.View树的测量(measure) Android View框架的measure机制 2.View树的布局(layout)Andr ...

  3. Codeforces Round #614 (Div. 2) D

    变色失败 只加8分 距离变色只差5分 B题没想到那么简单,结论秒猜,不敢交,傻傻验证5分钟. C题也想了码了好一会儿,我动态维护set做的. 1小时3题,整体难度好像没以前那么大了?(虽然也不强,但比 ...

  4. [转]从实例谈OOP、工厂模式和重构

    有了翅膀才能飞,欠缺灵活的代码就象冻坏了翅膀的鸟儿.不能飞翔,就少了几许灵动的气韵.我们需要给代码带去温暖的阳光,让僵冷的翅膀重新飞起来.结合实例,通过应用OOP.设计模式和重构,你会看到代码是怎样一 ...

  5. java - 虚拟机性能监控与故障处理工具

    背景 在项目开发中往往不是一个人完成整个项目,而是由一个团队进行开发,而团队中成员的编程能力参差不齐难免会影响项目性能.当一个项目基本定型后难免会遇到项目产品使用的效果不理想例如长时间失去响应.系统卡 ...

  6. [CF1304C] Air Conditioner

    维护一区间 \([l,r]\) 人按照时间升序 考虑 \((l_i, h_i, t_i)\),当前的所有区间与这个区间取交 推到 \(t_{i+1}\) 时,所有区间的端点向两边扩张即可 注意把空掉的 ...

  7. C++——指针3

    指针作为函数参量 指针作为函数参量,以地址的方式传递数据,可以用来返回函数处理结果:实参是数组名时形参可以是指针. 题目:读入三个浮点数,将整数部分和小数部分分别输出 #include <ios ...

  8. 在myEclipse中根据图表自动生成Hibernate文件

    1.新建一个Java Project项目,在scr中创建两个包:Com.hibernate.po 和com.hibernate.dao 2. 3.点击ok 4. 5.选中MyElipse Derby, ...

  9. 野路子码农(5)Python中的装饰器,可能是最通俗的解说

    装饰器这个名词一听就充满了高级感,而且很多情况下确实也不常用.但装饰器有装饰器的好处,至少了解这个对装逼还是颇有益处的.网上有很多关于装饰器的解说,但通常都太过“循序渐进”,有的还会讲一些“闭包”之类 ...

  10. 3ds Max File Format (Part 3: The department of redundancy department; Config)

    Now we'll have a look at the Config stream. It begins like follows, and goes on forever with various ...