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. 题解 CF409A 【The Great Game】

    题目传送门. 思路: 首先我们定义\(2\)个字符串,分别存放 TEAM 1 与 TEAM 2 的出招顺序.接着再定义\(2\)个变量,存放 TEAM 1 与 TEAM 2 的分数. string s ...

  2. 题解 P5733 【【深基6.例1】自动修正】

    题目传送门 分析: 1.这道题可以说是一个字符串的练习好题.我们先来了解一下字符串.在这道题中,建议使用\(string\) \(string\)是\(C++\).\(java\).\(VB\)等编程 ...

  3. HandlerMethod解析

    api写HandlerMethod的作用: Encapsulates information about a handler method consisting of a method and a b ...

  4. 前端框架-Vue 入门

    一.介绍 1.Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. ...

  5. 题解 【洛谷P4995】跳跳!

    一看题目名字,下意识地认为DP. 打开题目,发现是一道水的贪心,和DP没一分钱关系(毕竟是洛谷最水月赛的T2). 废话不多说. 看完题面,首先想到排序.要将乱序的石头高度变为有序,才能更好地想题. C ...

  6. C#.net连接Sybase的方法

    一 .ODBC方式连接 1 安装Sybase客户端,安装ODBC驱动,配置DSN<略> 2 连接代码 string strconn = "DSN=TEST;SRVR=TEST;D ...

  7. Android监听消息通知栏点击事件

    Android监听消息通知栏点击事件 使用BroadCastReceiver 1 新建一个NotificationClickReceiver 类,并且在清单文件中注册!! public class N ...

  8. java.lang.IndexOutOfBoundsException: Remember that ordinal parameters are 1-based!

    问题描述 java.lang.IndexOutOfBoundsException: Remember that ordinal parameters are 1-based! 红色部分报错 for ( ...

  9. SDF数据库

    一.SDF数据库初探 SDF是一个标准缩略数据库格式.这个数据库包含扩展名为.sdf的文件并且以结构化文件格式进行数据存储.这些SDF文件通常用于在不同数据库应用之间移动数据.它允许一个用户将一个软件 ...

  10. 如何着手学习WebRTC开发(转)

    文章链接:http://www.sohu.com/a/146536246_458408 WebRTC中文社区-国内镜像:https://webrtc.org.cn/mirror/#windows%E2 ...