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的更多相关文章

  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. [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: ...

  3. [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 ...

  4. 简单 babel plugin 开发-使用lerna 工具

    babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...

  5. babel plugin和presets是什么,怎么用?

    https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...

  6. babel plugin

    a = () => {}, // Support for the experimental syntax 'classProperties' isn't currently enabled ya ...

  7. [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 ...

  8. [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 ...

  9. 前端利器躬行记(2)——Babel

    Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...

随机推荐

  1. const 函数

    const int *p   // 修饰*p ,p指针可以变,但是*p的值不变 例子: int a = 5; int b = 10; const *p = &a; *p = 10: // 不可 ...

  2. 覆盖的面积 HDU - 1255 线段树+扫描线+离散化 求特定交叉面积

    #include<cstdio> #include<map> #include<algorithm> using namespace std; ; struct N ...

  3. MyBatis的延迟加载和缓存机制

    延迟加载: 什么是延迟加载: MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. MyBatis根据对 ...

  4. WIN10开启FTP(完整版)

    1.控制面板 --> 程序--> 启用或关闭windows功能 2.左下角搜索栏搜索IIS(iis) 3.右键添加FTP站点 4.创建站点名字和目录 5.绑定本机IP地址,SSL勾选无SS ...

  5. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  6. PAT (Basic Level) Practice (中文)1076 Wifi密码 (15 分)

    下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一 ...

  7. [CF1303G] Sum of Prefix Sums - 点分治,李超线段树

    给定一棵 \(n\) 个点的带点权的树,求树上的路径 \(x_1,...,x_k\) ,最大化 \(\sum_{i=1}^k ia_{x_i}\) Solution 树上路径问题可用点分治. 考虑如何 ...

  8. Java多线程之synchronized和volatile

    概述 用Java来开发多线程程序变得越来越常见,虽然Java提供了并发包来简化多线程程序的编写,但是我们有必要深入研究一下,才能更好的掌握这块知识. 本文主要对Java提供的底层原语synchroni ...

  9. mysql权限过滤

    1.用like做权限过滤 上级部门可以看到下级部门发布的正式文件,下级部门不能看到上级部门发布的正式文件 SELECT*FROM cms_nrgl_st a, mz_xzjg bWHERE a.sys ...

  10. 885-螺旋矩阵 - III

    885-螺旋矩阵 - III 在 R 行 C 列的矩阵上,我们从 (r0, c0) 面朝东面开始 这里,网格的西北角位于第一行第一列,网格的东南角位于最后一行最后一列. 现在,我们以顺时针按螺旋状行走 ...