一个bebel插件

Babel它的原理,简单点说: Babel解析成AST,然后插件更改AST,最后由Babel输出代码

## 代码都可以拆解成抽象语法树,语法树解析网站:[https://astexplorer.net/](https://links.jianshu.com/go?to=https%3A%2F%2Fastexplorer.net%2F)
AST不依赖于具体的文法,不依赖于语言的细节,我们将源代码转化为AST后,可以对AST做很多的操作,包括一些你想不到的操作,这些操作实现了各种各样形形色色的功能,
简介:抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法,也就是说语法分析阶段所采用的上下文无文文法,因为在写文法时,经常会对文法进行等价的转换(消除左递归,回溯,二义性等),这样会给文法分析引入一些多余的成分,对后续阶段造成不利影响,甚至会使合个阶段变得混乱。因些,很多编译器经常要独立地构造语法分析树,为前端,后端建立一个清晰的接口。

抽象语法树在很多领域有广泛的应用,比如浏览器,智能编辑器,编译器。
https://www.jianshu.com/p/f19101a08644?u_atoken=c47ab2ab-4f89-4200-9f7b-84d94193c5a8&u_asession=01qbwypRkl1vUqPkiOm4RD5XWkPS36QJ9uG3SqpxYiQeEZbo5PoUACsmeZwNxWJS_oX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K94BYOF1nB7qj0rT6U6SwOxVpSIj1gN2LaYxLWUpsc1qWBkFo3NEHBv0PZUm6pbxQU&u_asig=05bMIvyBb_Ao9RS7k9PNPI-5kxVVATg_7xDZ0zt_uzddiYj-W34MaHSM7aiT0wIdBVyOiZqfRjRd3SlZVeo_Cvt6avXnfQcKwDtMa6N8x3EO54IUlQht07pE-2Rs4NAc0A5771S_mqUPcStVdSnOGuAXQpyvFbx_rJ65lqDK3uB4j9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzbPNIqayTXr4GcfbWv-zL5bCEpyhsa_kNO7HgES7x1w9U4HK4hPy3A7RVNDWi_-Gxu3h9VXwMyh6PgyDIVSG1W85dzA6M4XXorffKT6b9qGEko3vS8lKQvxYTphZ3n_8OZd_Q6ur61ZO-MRdNb6ENcnyM94HJjIq6FA6fPr3MhYqmWspDxyAEEo4kbsryBKb9Q&u_aref=36PjU6QvWlivDv5RUlkh8TDpMik%3D
// index.js
var babel = require('@babel/core');
var t = require('@babel/types');

const visitor = {
  BinaryExpression(path) {
    const node = path.node;
    let result;
    // 判断表达式两边,是否都是数字
    if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
      // 根据不同的操作符作运算
      switch (node.operator) {
        case "+":
          result = node.left.value + node.right.value;
          break
        case "-":
          result = node.left.value - node.right.value;
          break;
        case "*":
          result =  node.left.value * node.right.value;
          break;
        case "/":
          result =  node.left.value / node.right.value;
          break;
        case "**":
          let i = node.right.value;
          while (--i) {
            result = result || node.left.value;
            result =  result * node.left.value;
          }
          break;
        default:
      }
    }

    // 如果上面的运算有结果的话
    if (result !== undefined) {
      // 把表达式节点替换成number字面量
      path.replaceWith(t.numericLiteral(result));
    }
  }
};

module.exports = function (babel) {
  return {
    visitor
  };
}
const babel = require("@babel/core");

const result = babel.transform("const result = 1 + 2;",{
  plugins:[
    require("./index")
  ]
});

console.log(result.code); // const result = 3;
https://juejin.cn/post/6844903566809759758

你可能感兴趣的:(一个bebel插件)