美文网首页
2020-07-23 babel ast遍历

2020-07-23 babel ast遍历

作者: FConfidence | 来源:发表于2020-07-23 01:23 被阅读0次

    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;
    };
    */
    

    相关文章

      网友评论

          本文标题:2020-07-23 babel ast遍历

          本文链接:https://www.haomeiwen.com/subject/pydflktx.html