babel ast的初级构建

ast叫做抽象语法树， 如babel, eslint, typescript和webpack都是借助了抽象语法树，做语法解析（语法分词和语法分析）。

 

分析和语法分析在线

https://astexplorer.net/

安装

需要操作 AST 代码，这里，我们需要借助两个库，分别是 @babel/core 和 babel-types。

其中 @babel/core 是 babel 的核心库，用来实现核心转换引擎，babel-types 类型判断，用于生成AST零部件

 

//babel 核心库，用来实现核心转换引擎
const babel = require('@babel/core')
//类型判断，生成AST零部件
const types = require('babel-types')

//源代码
const code = `const sum=(a,b)=>a+b;` 
let result = babel.transform(code,{
    plugins:[
        {
            visitor
        }
    ]
})

　书写plugin　

1. arrowFunction

let visitor = {
    ArrowFunctionExpression(path){
        let params = path.node.params;
        //创建一个blockStatement
        let blockStatement = types.blockStatement([
            types.returnStatement(types.binaryExpression(
                '+',
                types.identifier('a'),
                types.identifier('b')
            ))
        ]);
        //创建一个函数
        let func = types.functionExpression(null, params, blockStatement, false, false);
        //替换
        path.replaceWith(func);
    }
};

 

2.classFunction

const babel = require("@babel/core");
const { functionExpression } = require("babel-types");
//类型判断，生成AST零部件
const types = require("babel-types");

//源代码
const code = `class Person {
    constructor(name) {
        this.name=name;
    }
    sayName() {
        return this.name;
    }
  }`;
const expect = `function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function () {
    return this.name;
};`;
let visitor = {
  ClassDeclaration(path) {
      const {id, body} = path.node;
      const bbody = body.body[0];
      let funs = [];
      const constructor = types.functionDeclaration(id, bbody.params, bbody.body, false, false);
      funs.push(constructor);
      const pbody = body.body[1];
     
      const source = types.memberExpression(id, types.identifier('prototype'), false);
      const left = types.memberExpression(source,pbody.key,pbody.computed);
     const right = types.functionExpression(null, pbody.params, pbody.body, false, false  );
      const proto = types.assignmentExpression('=', left, right); 
      funs.push(proto);
    path.replaceWithMultiple(funs);
  },
};
let result = babel.transform(code, {
  plugins: [
    {
      visitor,
    },
  ],
});
console.log(result.code);