2020-07-23 babel ast遍历

babel

• 访问者模式Visitor 对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同
• @babel/core Babel 的编译器，核心 API 都在这里面，比如常见的 transform、parse
• @babel/parser Babel 的解析器
• @babel/types 用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法，对编写处理 AST 逻辑非常有用
• @babel/traverse 用于对 AST 的遍历，维护了整棵树的状态，并且负责替换、移除和添加节点
• babel-types-api Babel 插件文档
• babeljs.io babel可视化编译器

# 安装依赖
npm install @babel/core @babel/types --save-dev

// babel核心库, 用来实现核心的转换引擎
const babel = require('@babel/core');

// let babelTypes = require('@babel/types');
export default function () {
  const { types: babelTypes } = babel;
  
  return {
    name: "ast-transform", // not required
    visitor: {
      // babel内部会先把代码转成ast, 然后再进行遍历 (匹配type)
      ArrowFunctionExpression: (path) => {
        let node = path.node;
        let id = path.parent.id;
        let params = node.params;
        // 创建一个body
        const body = babelTypes.blockStatement([babelTypes.returnStatement(node.body)]);
        // 生成一个函数
        let functionExpression = babelTypes.functionExpression(id, params, body, false, false);
        // 用新的函数替换老的函数
        path.replaceWith(functionExpression);
      },
    }
  };
}

测试

const arrowFuncCode = `const sum = (a,b) => a + b`;

const transformArrowFunctions  = require('./transformArrowFunctions.js');
const arrowResult = babel.transform(arrowFuncCode, {
  plugins: [transformArrowFunctions],
});

console.log(arrowResult.code);
/*
const sum = function sum(a, b) {
  return a + b;
};
*/