[AST Babel] Add function name into the console log 'path.findParent(t.isFunctionDeclaration)'
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)'的更多相关文章
- [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 ...
- [AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression
Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html Now we need to think ...
- javascript精雕细琢(四):认亲大戏——通过console.log彻底搞清this
目录 引言 代码在前 1.function下的this 2.箭头函数下的this 结语 引言 JS中的this指向一直是个老生常谈,但是新手又容易晕的地方.我在网上浏览了很多帖子,但是发 ...
- IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行
问题来源:外网IE下,触发js报错.经检测,未清除console造成.清除console后,解决. 问题原因:console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebug ...
- return console.log()结果为undefined现象的解答
console.log总是出现undefined--麻烦的console //本文为作者自己思考后总结出的一些理论知识,若有错误,欢迎指出 bug出现 需求如下:新建一个car对象,调用其中的de ...
- 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); }; / ...
- [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: ...
- 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 ...
- 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 这道题涉及了异步.作用域.闭包 ...
随机推荐
- A - Wireless Network POJ - 2236-kuangbin带你飞
A - Wireless Network POJ - 2236 Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 50348 ...
- Codeforce 474A - Keyboard
Our good friend Mole is trying to code a big message. He is typing on an unusual keyboard with chara ...
- Jmeter-文件目录
Jmeter文件目录介绍 1.bin:可执行文件目录 (1)jmeter.bat:windows的启动文件 (2)jmeter.log:日志文件 (3)jmeter.sh:linux的启动文件 (4) ...
- Python爬虫连载8-JS加密(一)
一.JS加密 1.有的反爬虫策略采用js对需要传输的数据进行加密处理. 2.经过加密,传输的就是密文 3.加密函数或者过程一定是在浏览器完成,也就是一定会把代码(js代码)暴露给使用者 4.通多阅读加 ...
- 【Unity|C#】基础篇(3)——类(class)/ 接口(interface)
[学习资料] <C#图解教程>(第4~7章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu ...
- 本地项目如何上传到github
首先登录官网注册用户(此处不多介绍),然后需要登录github创建仓库 https://github.com/ 然后取一个自己喜欢的名字(这里我的名字是webclock),点击Create rep ...
- 【算法】状态压缩DP
状态压缩DP是什么? 答:利用位运算(位运算比加减乘除都快!)来记录状态,并实现动态规划. 适用于什么问题? 答:数据规模较小:不能使用简单的算法解决. 例题: 题目描述 糖果店的老板一共有M 种口味 ...
- 素问 - 使用 PE、PB 做估值
摘自<小韭的学习圈> Q 哪些行业用PE看合适,哪些用PB看合适啊?其中的大致逻辑是什么? A PE = 股价 / 每股收益 使用PE的逻辑是,我们认为一个股票有价值,是因为公司未来能赚钱 ...
- maven scope 的作用
一: 1.Maven中的依赖作用范围概述 Maven中使用 scope 来指定当前包的依赖范围和依赖的传递性.常见的可选值有:compile, provided, runtime, test, sys ...
- [HNOI2014] 道路堵塞 - 最短路,线段树
对不起对不起,辣鸡蒟蒻又来用核弹打蚊子了 完全ignore了题目给出的最短路,手工搞出一个最短路,发现对答案没什么影响 所以干脆转化为经典问题:每次询问删掉一条边后的最短路 如果删掉的是非最短路边,那 ...