码迷,mamicode.com
首页 > 其他好文 > 详细

ast入门

时间:2020-07-05 21:08:35      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:gen   创建   Edito   框架   img   基本框架   lin   npm   conf   

拓展

JavaScript 教程
ES6 入门教程

百度在线字体编辑器
奇Q在线字体编辑器
fonttools

AST在线解析网站
babel库 GitHub
babel库 docs
Babel插件开发手册

查看JavaScript代码流程
GitHub地址

技术图片

安装

node
https://nodejs.org/zh-cn/

babel

npm install @babel/core

基本框架

const fs = require(‘fs‘);
const {parse} = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const t = require("@babel/types");
const generator = require("@babel/generator").default;

let jscode = fs.readFileSync("./demo.js", {
    encoding: "utf-8"
});
let ast = parse(jscode);

const visitor =
{
  //TODO  write your code here!
}

//some function code

traverse(ast,visitor);
let {code} = generator(ast);
fs.writeFile(‘decode.js‘, code, (err)=>{});

节点含义

使用

变量替换

原代码:

var s=92
var a = s+5
var b=func(1324801, a)

替换后:

var s = 92;
var a = 97;
var b = func(1324801, 97);

技术图片
技术图片

通过 path.evaluate() 来进行计算,替换代码:

const visitor =
{
    "Identifier|BinaryExpression"(path) {
        let {confident, value} = path.evaluate();
        // console.log(path.type, confident, value)
        if (confident) {
            // console.log(path.node);
            path.replaceInline(t.valueToNode(value))
        }
    },
}

构建 BinaryExpression 类型的节点

注释的是不调用库函数创建的方法

const visitor =
{
    "VariableDeclarator"(path){
        const {init} = path.node;
        // let node = {
        //     type: "BinaryExpression",
        //     operator: "*",
        //     left: {
        //         type: "NumericLiteral",
        //         value: 20,
        //     },
        //     right: {
        //         type: "NumericLiteral",
        //         value: 20,
        //     }
        // }
        //
        // init || path.set("init", node)

        init || path.set("init", t.binaryExpression(‘*‘,t.valueToNode(20),t.valueToNode(30)))

    }
}

a[‘length‘] 转换为 a.length

const visitor =
{
    "MemberExpression"(path){
        let property = path.get(‘property‘);
        if(property.isStringLiteral()){
            let value = property.node.value;
            path.node.computed = false;
            property.replaceWith(t.Identifier(value))
        }
    }
}

严格模式

const visitor =
{
    "FunctionExpression"(path){
        let body = path.node.body;
        body.directives[0] = t.directiveLiteral(‘use strict‘)
    }
}

ast入门

标签:gen   创建   Edito   框架   img   基本框架   lin   npm   conf   

原文地址:https://www.cnblogs.com/gaoyongjian/p/13246736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!