[AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression
Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html
Now we need to think about functionExpression and ArrowFunction:
function add(a, b) {
console.log(a, b)
return a + b
}
function subtract(a, b) {
console.log(a, b)
return a - b
}
const multiply = (a, b) => {
console.log(a, b)
return a * b;
}
const divide = function(a, b) {
console.log(a, b)
return a / b;
}
add(, )
subtract(, )
multiply(, )
divide(, )
console.log('sup dawg')
Transform code:
export default function(babel) {
const { types: t } = babel;
function getFnName(path) {
const expOrArwFn = path.findParent(t.isVariableDeclaration);
const parentFn = path.findParent(t.isFunctionDeclaration);
let faName = "";
if (parentFn) {
faName = `${parentFn.node.id.name} `;
} else if (expOrArwFn) {
faName = `${expOrArwFn.node.declarations[].id.name} `;
} else {
faName = "";
}
return faName;
}
return {
name: "ast-transform", // not required
visitor: {
CallExpression(path) {
if (
!looksLike(path.node, {
callee: {
type: "MemberExpression",
object: {
name: "console"
},
property: {
name: "log"
}
}
})
) {
return;
}
// insert string into console.log('instread here', a,b)
const { line, column } = path.node.loc.start;
const fnName = getFnName(path);
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);
}
Output:
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
}
const multiply = (a, b) => {
console.log("multiply 12:4", a, b)
return a * b;
}
const divide = function(a, b) {
console.log("divide 17:4", a, b)
return a / b;
}
add(, )
subtract(, )
multiply(, )
divide()
console.log("25:0", 'sup dawg')
Other solutions;
export default function(babel) {
const {types: t} = babel
return {
name: 'captains-log',
visitor: {
CallExpression(path) {
if (
!looksLike(path, {
node: {
callee: {
type: 'MemberExpression',
object: {
name: 'console',
},
},
},
})
) {
return
}
let prefix = ''
const functionName = getFunctionName(path)
if (functionName) {
prefix += functionName
}
const start = path.node.loc.start
prefix += ` ${start.line}:${start.column}`
path.node.arguments.unshift(t.stringLiteral(prefix.trim()))
},
},
}
function getFunctionName(path) {
const parentFunction = path.findParent(parent => {
return (
t.isFunctionDeclaration(parent) ||
t.isArrowFunctionExpression(parent) ||
t.isFunctionExpression(parent)
)
})
if (!parentFunction) {
return null
}
if (looksLike(parentFunction, {node: {id: t.isIdentifier}})) {
return parentFunction.node.id.name
} else if (
t.isVariableDeclarator(parentFunction.parent) ||
t.isFunctionExpression(parentFunction.parent)
) {
return parentFunction.parent.id.name
}
return null
}
}
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 Plugin] Hanlde ArrowFunction && FunctionExpression的更多相关文章
- [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 ...
- [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: ...
- [Javascript AST] 1. Continue: Write a simple Babel plugin
We want to write a Babel Plugin, which move 'const versionRegex = /(/d+)\.(/d+)\.(/d+)/gi' out of fu ...
- 简单 babel plugin 开发-使用lerna 工具
babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- babel plugin
a = () => {}, // Support for the experimental syntax 'classProperties' isn't currently enabled ya ...
- [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 ...
- [Javascript AST] 0. Introduction: Write a simple BabelJS plugin
To write a simple Babel plugin, we can use http://astexplorer.net/ to help us. The plugin we want to ...
- 前端利器躬行记(2)——Babel
Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...
随机推荐
- kali安装后中文乱码
参考: 文章一:https://blog.csdn.net/dust_hk/article/details/103299136?depth_1-utm_source=distribute.pc_rel ...
- 修改sudoers
使用visudo命令 [root@898f990a8808 etc]# visudo
- PTA甲级B1061 Dating
目录 B1061 Dating (20分) 题目原文 Input Specification: Output Specification: Sample Input: Sample Output: 生 ...
- 使用SSM 或者 springboot +mybatis时,对数据库的认证信息(用户名,密码)进行加密。
通常情况下,为了提高安全性,我们需要对数据库的认证信息进行加密操作,然后在启动项目的时候,会自动解密来核对信息是否正确.下面介绍在SSM和springboot项目中分别是怎样实现的. 无论是使用SSM ...
- 春节过后就是金三银四求职季,分享几个Java面试妙招,轻松搞定HR!
春节过后就是金三银四,分享几个Java面试妙招,轻松搞定HR! 2020年了,先祝大家新年快乐! 今年IT职位依然相当热门,特别是Java开发岗位.软件开发人才在今年将有大量的就业机会.春节过后,金三 ...
- [转载]Ubuntu 使用Compiz配置炫酷3D桌面
原文地址 个人引言: 这个Compiz使用与我的这篇Blog:打摆不顺利?是你没看这篇!相互有联系.这个Compiz是打摆工具之一,可以把打摆窗口调成透明,这样机房监控拍下来的屏幕会是打摆窗口下面的某 ...
- [译]C# 7系列,Part 10: Span<T> and universal memory management Span<T>和统一内存管理
原文:https://blogs.msdn.microsoft.com/mazhou/2018/03/25/c-7-series-part-10-spant-and-universal-memory- ...
- Educational Codeforces Round 80 (Rated for Div. 2)(A-E)
C D E 这三道题感觉挺好 决定程序是否能通过优化在要求的时间内完成,程序运行时间为t,你可以选择花X天来优化,优化后程序的运行时间为t/(x+1)取上整,花费的时间为程序运行时间加上优 ...
- Java知识点题集
一.红黑树的特性 (1)每个节点或者是黑色,或者是红色. (2)根节点是黑色. (3)每个叶子节点(NIL)是黑色. [注意:这里叶子节点,是指为空(NIL或NULL)的叶子节点!] (4)如果一个节 ...
- ECMAScript规范中第六大基本类型 Symbol
初步了解第六大基本类型Symbol 概述: 什么是Symbol.Symbol是一个标记,一个独一无二的记号. Symbol的出现主要是解决了以前ES5中两个问题 在属性中同名的属性会被覆盖 无法做到属 ...