For example we have current code:

  1. function add(a, b) {
  2. console.log(a, b)
  3. return a + b
  4. }
  5.  
  6. function subtract(a, b) {
  7. console.log(a, b)
  8. return a - b
  9. }
  10.  
  11. add(, )
  12. subtract(, )
  13. console.log('sup dawg')

We want to transform the code to:

  1. function add(a, b) {
  2. console.log("2:4", a, b)
  3. return a + b
  4. }
  5.  
  6. function subtract(a, b) {
  7. console.log("7:4", a, b)
  8. return a - b
  9. }
  10.  
  11. add(, )
  12. subtract(, )
  13. console.log("13:0", 'sup dawg')

Added line and colum number in front of console log arguements

Using the utilites functions:

  1. function looksLike(a, b) {
  2. return (
  3. a &&
  4. b &&
  5. Object.keys(b).every(bKey => {
  6. const bVal = b[bKey]
  7. const aVal = a[bKey]
  8. if (typeof bVal === 'function') {
  9. return bVal(aVal)
  10. }
  11. return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal)
  12. })
  13. )
  14. }
  15.  
  16. function isPrimitive(val) {
  17. return val == null || /^[sbn]/.test(typeof val)
  18. }

Babel plugin code:

  1. export default function (babel) {
  2. const { types: t } = babel;
  3.  
  4. return {
  5. name: "ast-transform", // not required
  6. visitor: {
  7. CallExpression(path) {
  8. if (!looksLike(path.node, {
  9. callee: {
  10. type: 'MemberExpression',
  11. object: {
  12. name: 'console'
  13. },
  14. property: {
  15. name: 'log'
  16. }
  17. }
  18. })) {
  19. return
  20. }
  21. console.log(path.node.loc)
  22. // insert string into console.log('instread here', a,b)
  23. const {line, column} = path.node.loc.start;
  24. path.node.arguments.unshift(t.stringLiteral(`${line}:${column}`))
  25. }
  26. }
  27. };
  28. }

[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. Vs2013以管理员身份运行

    VS快捷方式目录下的devenv.exe 右键->兼容性疑难解答->疑难解答程序->勾选该程序需要附加权限即可,以后每次打开VS时都会以管理员身份运行了!

  2. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  3. react 和 vue 的优缺点总结

    React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就 ...

  4. Spring boot --- 自动配置

    spring boot 自动配置 指的是针对很多spring 应用程序常见的应用功能,spring boot 能自动提供相关配置. spring boot 自动配置加载     Spring boot ...

  5. 转载:TDM协议

    转自http://www.wangdali.net/i2s/ 1. PCM简介 PCM (Pulse Code Modulation) 是通过等时间隔(即采样率时钟周期)采样将模拟信号数字化的方法.图 ...

  6. [LOJ113] 最大异或和 - 线性基

    虽然是SB模板但还真是第一次手工(然而居然又被运算符优先级调戏了) #include <bits/stdc++.h> using namespace std; #define int lo ...

  7. jsp中的javascript的$(document).ready( function() { $("#loginForm").validate()

    转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...

  8. Oracle查询当前用户和当前用户下的所有表

    转载自:http://blog.itpub.net/29485627/viewspace-1246317/ Oracle查询当前用户和当前用户下的所有表 (1)查询当前用户 SQL> show ...

  9. window环境下获取python安装的路径

    1.cmd + win  打开命令行 2.where python

  10. iframe宽高自适应

    iframe子页面结尾添加本script iframe子页面结尾添加本script <script type="text/javascript">         fu ...