使用 babel 进行 AST 分析和处理

使用 babel 进行 AST 分析和处理

JavaScript 其它杂项

访问GitHub主页

共43Star

详细介绍

使用 babel 进行 AST 分析和处理

PDF 下载

babel 插件的官方手册已经相当详实了，似乎没有太多必要再写一遍，不过为了小组分享，还是花了几个小时整理了一番。

flow

针对上图中的 Parser、Traversal、Transform、Generator 分别写了几个简单的 Demo，跟着一步一步来，结合文档，应该可以完全掌握。

Parser

const babylon = require('babylon');

const code = `
function plus(a, b) {
  return a + b;
}
`;
const ast = babylon.parse(code, {
  sourceType: 'module'
});

traversal

遍历节点，筛选遍历

const traversal = require('babel-traverse').default;

traversal(ast, {
  Identifier: function (path) {
    console.log(path.node.name);
  }
});

进出节点

traversal(ast, {
  Identifier: {
    enter: function (path) {
      console.log(path.node.name, 'enter');
    }, 
    exit: function (path) {
      console.log(path.node.name, 'exit\n');
    }
  }
});

局部遍历

traversal(ast, {
  FunctionDeclaration: function (path) {
    if (path.node.id.name !== 'plus') return;
    path.traverse({
      Identifier: {
        enter: function (path) {
          console.log(path.node.name, 'enter');
        }, 
        exit: function (path) {
          console.log(path.node.name, 'exit\n');
        }
      }
    });
  }
});

transform

traversal(ast, {
  FunctionDeclaration: function (path) {
    path.traverse({
      Identifier: {
        enter: function (path) {
          if (types.isIdentifier(path.node, { name: "a" })) {
            // 节点替换
            path.replaceWith(types.Identifier('x'), path.node);
          }
        },
        exit: function (path) {
          console.log(path.node.name);
        }
      }
    });
  }
});

工具

在做 AST 转换的时候，下面两个东西可以很大程度帮到你：

推荐源码