Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html

Now we need to think about functionExpression and ArrowFunction:

  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. const multiply = (a, b) => {
  12. console.log(a, b)
  13. return a * b;
  14. }
  15.  
  16. const divide = function(a, b) {
  17. console.log(a, b)
  18. return a / b;
  19. }
  20.  
  21. add(, )
  22. subtract(, )
  23. multiply(, )
  24. divide(, )
  25. console.log('sup dawg')

Transform code:

  1. export default function(babel) {
  2. const { types: t } = babel;
  3.  
  4. function getFnName(path) {
  5. const expOrArwFn = path.findParent(t.isVariableDeclaration);
  6. const parentFn = path.findParent(t.isFunctionDeclaration);
  7. let faName = "";
  8. if (parentFn) {
  9. faName = `${parentFn.node.id.name} `;
  10. } else if (expOrArwFn) {
  11. faName = `${expOrArwFn.node.declarations[].id.name} `;
  12. } else {
  13. faName = "";
  14. }
  15.  
  16. return faName;
  17. }
  18.  
  19. return {
  20. name: "ast-transform", // not required
  21. visitor: {
  22. CallExpression(path) {
  23. if (
  24. !looksLike(path.node, {
  25. callee: {
  26. type: "MemberExpression",
  27. object: {
  28. name: "console"
  29. },
  30. property: {
  31. name: "log"
  32. }
  33. }
  34. })
  35. ) {
  36. return;
  37. }
  38.  
  39. // insert string into console.log('instread here', a,b)
  40. const { line, column } = path.node.loc.start;
  41. const fnName = getFnName(path);
  42. const prefix = fnName + `${line}:${column}`;
  43. path.node.arguments.unshift(t.stringLiteral(prefix));
  44. }
  45. }
  46. };
  47. }
  48.  
  49. function looksLike(a, b) {
  50. return (
  51. a &&
  52. b &&
  53. Object.keys(b).every(bKey => {
  54. const bVal = b[bKey];
  55. const aVal = a[bKey];
  56. if (typeof bVal === "function") {
  57. return bVal(aVal);
  58. }
  59. return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal);
  60. })
  61. );
  62. }
  63.  
  64. function isPrimitive(val) {
  65. return val == null || /^[sbn]/.test(typeof val);
  66. }

Output:

  1. function add(a, b) {
  2. console.log("add 2:4", a, b)
  3. return a + b
  4. }
  5.  
  6. function subtract(a, b) {
  7. console.log("subtract 7:4", a, b)
  8. return a - b
  9. }
  10.  
  11. const multiply = (a, b) => {
  12. console.log("multiply 12:4", a, b)
  13. return a * b;
  14. }
  15.  
  16. const divide = function(a, b) {
  17. console.log("divide 17:4", a, b)
  18. return a / b;
  19. }
  20.  
  21. add(, )
  22. subtract(, )
  23. multiply(, )
  24. divide()
  25. console.log("25:0", 'sup dawg')

Other solutions;

  1. export default function(babel) {
  2. const {types: t} = babel
  3.  
  4. return {
  5. name: 'captains-log',
  6. visitor: {
  7. CallExpression(path) {
  8. if (
  9. !looksLike(path, {
  10. node: {
  11. callee: {
  12. type: 'MemberExpression',
  13. object: {
  14. name: 'console',
  15. },
  16. },
  17. },
  18. })
  19. ) {
  20. return
  21. }
  22. let prefix = ''
  23. const functionName = getFunctionName(path)
  24. if (functionName) {
  25. prefix += functionName
  26. }
  27. const start = path.node.loc.start
  28. prefix += ` ${start.line}:${start.column}`
  29. path.node.arguments.unshift(t.stringLiteral(prefix.trim()))
  30. },
  31. },
  32. }
  33.  
  34. function getFunctionName(path) {
  35. const parentFunction = path.findParent(parent => {
  36. return (
  37. t.isFunctionDeclaration(parent) ||
  38. t.isArrowFunctionExpression(parent) ||
  39. t.isFunctionExpression(parent)
  40. )
  41. })
  42. if (!parentFunction) {
  43. return null
  44. }
  45. if (looksLike(parentFunction, {node: {id: t.isIdentifier}})) {
  46. return parentFunction.node.id.name
  47. } else if (
  48. t.isVariableDeclarator(parentFunction.parent) ||
  49. t.isFunctionExpression(parentFunction.parent)
  50. ) {
  51. return parentFunction.parent.id.name
  52. }
  53. return null
  54. }
  55. }
  56.  
  57. function looksLike(a, b) {
  58. return (
  59. a &&
  60. b &&
  61. Object.keys(b).every(bKey => {
  62. const bVal = b[bKey]
  63. const aVal = a[bKey]
  64. if (typeof bVal === 'function') {
  65. return bVal(aVal)
  66. }
  67. return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal)
  68. })
  69. )
  70. }
  71.  
  72. function isPrimitive(val) {
  73. return val == null || /^[sbn]/.test(typeof val)
  74. }

[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. Swift Playgrounds for mac基础知识介绍

    Swift Playgrounds是一款适用于iPad和Mac的革命性应用程序,它使Swift学习变得互动而有趣.它不需要编码知识,因此非常适合刚开始的学生.使用Swift解决难题,以掌握基本知识.S ...

  2. P1089题解 津津的储蓄计划

    来水一篇题解 #include <iostream> using namespace std; int main() { int month[12]; int mother=0,have= ...

  3. linux 异常 - setsebool: SELinux is disabled.

    问题描述 运行命令:setsebool httpd_can_network_connect 1 或者 setsebool httpd_can_network_connect_db 1 报错:setse ...

  4. 怎么利用 ChromeDriver 和 Selenium对 CEF应用进行自动化测试-java实现

    Overview ChromeDriver and Selenium are tools for automated testing of Chromium-based applications. T ...

  5. 关于学习java虚拟机的知识整理一:jvm内存区域

    之前由于考研,对于虚拟机的认识疏忽了太多,现在重新整理回顾一下. 如上图所示,jvm的内存区域(运行时数据区)共分为5处:方法区(Method Area).虚拟机栈(vm Stack).本地方法栈(N ...

  6. 字符串积累ing

    明天就要上网课拉拉啦啦! 数据库先在手机端登录然后转战客户端试之! 操作系统在客户端登录试一试! 马原用学习通试试啦! 首先,介绍一下strlen,strcpy,strcmp函数! 参考:https: ...

  7. Dubbo之服务消费

    Dubbo的服务消费主要包括两个部分.第一大步是ReferenceConfig类的init方法调用Protocol的refer方法生成Invoker实例,这是服务消息的关键.第二大步是把Invoker ...

  8. Java 中多态的实现(下)

    Java 中多态的另一个语法实现是重写.重载是通过静态分派实现的,重写则是通过动态分派实现的. 在学习动态分派之前,需要对虚拟机的知识有一个初步的了解. 虚拟机运行时数据区 运行 Java 程序时,虚 ...

  9. vjudge Lake Counting 搜索 水池 8方向

    原题链接https://vjudge.net/contest/331118#problem/A 题目: 现在有一个M*N的方阵,每个格子里面是.或者W,点代表水,然后如果在这个点的周围,即8个方向内还 ...

  10. Keras 回归 拟合 收集

    案例1 from keras.models import Sequential from keras.layers import Dense, LSTM, Activation from keras. ...