美文网首页
一个bebel插件

一个bebel插件

作者: 湘兰沅芷 | 来源:发表于2022-09-22 18:02 被阅读0次

    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插件

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