For example we have current code:

function add(a, b) {
console.log(a, b)
return a + b
} function subtract(a, b) {
console.log(a, b)
return a - b
} add(, )
subtract(, )
console.log('sup dawg')

We want to transform the code to:

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')

Added line and colum number in front of console log arguements

Using the utilites functions:

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)
}

Babel plugin 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
}
console.log(path.node.loc)
// insert string into console.log('instread here', a,b)
const {line, column} = path.node.loc.start;
path.node.arguments.unshift(t.stringLiteral(`${line}:${column}`))
}
}
};
}

[AST Babel Plugin] Transform code, add line:column number for console log的更多相关文章

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

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

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

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

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

  6. Error Code: 1054. Unknown column 'age' in 'user'

    1.错误描述 10:28:20 alter table user modify age int(3) after sex Error Code: 1054. Unknown column 'age' ...

  7. Mysql官方文档中争对安全添加列的处理方法。Mysql Add a Column to a table if not exists

    Add a Column to a table if not exists MySQL allows you to create a table if it does not exist, but d ...

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

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

  9. Error Code: 1054. Unknown column '字段名' in 'field list'

    问题描述: j博主在java开发过程中,通过读取excel中表名和字段名,动态创建insert的SQL语句,在mysql可视化工具中执行此SQL语句时,一直提示"Error Code: 10 ...

随机推荐

  1. Docker学习笔记三

    4.Docker数据管理 4.1.数据卷 数据卷是一个可供容器使用的特殊目录,它将主机操作系统目录直接映射进容器,类似与Linux的mount行为. 特性: 数据卷可以在容器之间共事和重用,容器间传递 ...

  2. vue 动态组件的传值

    vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案 第一种: 父组件向子组件传的是一个json对象,ES6的方法O ...

  3. AcWing 1023. 买书 完全背包

    //完全背包 求方案数目 //f[i][j] 只从前i个物品中选,且总体积恰好为j的方案的集合 //f[i][j]=f[i-1][j]+f[i-1][j-v*1]+f[i-1][j-v*2]+...f ...

  4. 删除表 (truncate 、delete 、drop)

    来源:http://www.cnblogs.com/dieyaxianju/p/7238936.html 删除表中内容分为三种情况. 1.删除表中所有数据,但保留表结构(可用以下两个语句): trun ...

  5. shiro认证和授权

    一.shiro基础概念 Authentication:身份认证 / 登录,验证用户是不是拥有相应的身份: Authorization:授权,即权限验证,验证某个已认证的用户是否拥有某个权限:即判断用户 ...

  6. C#String类型转换成Brush类型

    C#String类型转换成Brush类型: using System.Windows.Media; BrushConverter brushConverter = new BrushConverter ...

  7. nginx.conf 配置记录

    #user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log lognginxs/error.log; ...

  8. Linux下run文件的直接运行

    比如realplay.run 安装方法如下 chmod +x realplay.run ./realplay.run 然后他就会执行安装了,在过程中可能会要求你输入yes或no 安装完后就可以用了 , ...

  9. python之路之面向对象3

    一.知识点拾遗 1.多继承的易错点 二.设计模式 1.设计模式介绍 Gof设计模式 大话设计模式 2.单例模式 当所有实例中封装的数据相同时,使用单例模式 静态方法+静态字段 单例就是只有一个实例 a ...

  10. python之路之考试题目