html转换成抽象语法树，五分钟了解抽象语法树（AST）babel
是如何转换的？
html代码转链接抽象语法树
什么是抽象语法树？
It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.
抽象语法树是源代码语法结构的⼀种抽象表⽰。它以树状的形式表现编程语⾔的语法结构，树上的每个节点都表⽰源代码中的⼀种结构
看不懂没关系，抽象语法树有很多章节，我们不需要逐⼀了解
这篇⽂章会帮你建⽴起，抽象语法树的印象
我们只需要把⽬光聚焦于词法分析(Lexical Analysis)和语法分析(Syntax Analysis)上，这两步在转换抽象语法树过程中扮演着极其重要的⾓⾊。
词法分析 Lexical Analysis
也叫scanner(扫描器)，它读取我们的source code中你的每⼀个字符，转换成token(词法令牌), 最后，我的源代码可能会被转换成 list of tokens
input => const a = 5;
output => [{type: 'keyword', value: 'const', ...}, {type: 'identifier', value: 'a', ...}, {type: 'value', value: '5', ...}, ...]
语法分析 Syntax Analysis
也叫parser(解析器)，将词法分析器解析出的list of token，转换成tree representation
input => [{type: 'keyword', value: 'const', ...}, {type: 'identifier', value: 'a', ...}, {type: 'value', value: '5', ...}, ...]
output => [{type: 'VariableDeclarator', declarations: {kind: 'const', type: 'Identifier', name: 'a'}, init: {type: 'Literal', value: '5'}, ...}]
最终，经过词法分析和语法分析，我们的代码被转换成了⼀个树形节点
所有的树形节点组合起来，就形成了concrete syntax tree(混合语法树)，该树虽然和代码并不是100%匹配，但却包含了⾜够的信息使解析器能够正确的处理代码
Babel
babel是⼀个js编译器，他解析⾼版本es语法代码，⽣成向后兼容的低版本js代码。
how it works ？
在⾼层次上，babel解析分为三步
parser => transform => generate
我们将使⽤伪代码分析每⼀步的输⼊输出⽬标
step 1: parser
import * as BabelParser from '***@babel/parser*';
const code = ` const a = 5 `;
const ast = BabelParser.parse(code);
⾸先，parser输⼊源码，输出抽象语法树ast
step 2: transform
import traverse from '***@babel/traverse***';
const new_ast = traverse(ast, {
enter(path) {
if (pe === 'Identifier') {
// do something transformal
}
...
}
});
然后, 结合babel preset，plugin，转换上述ast，⽣成新的ast
step3: generate
import generate from '***@babel/generator***';
const newCode = generate(new_ast);
最后，根据新的语法树ast，⽣成编译后新的代码
总结起来就是：
parser: source_code => ast
traverse: ast => new_ast
generate: new_ast => target_code
实际上，babel的转换过程就是构建和修改抽象语法树的过程。
AST抽象语法树——最基础的javascript重点知识，99&percnt；的⼈根本不了解
AST抽象语法树——最基础的javascript重点知识,99%的⼈根本不了解 javascriptvue-clicommonjswebpackast  阅读约 27 分钟 抽象语法树(AST)，是⼀ ...
vue 的模板编译—ast&lpar；抽象语法树) 详解与实现
⾸先AST是什么? 在计算机科学中，抽象语法树(abstract syntax tree或者缩写为AST)，或者语法树(syntax tree)，是源代码的抽象语法结构的树状表现形式，这⾥特指编程语⾔ ...
1 Java程序⽂件中函数起始⾏和终⽌⾏在程序⽂件位置中的判定_&lowbar；抽象语法树⽅法
应⽤需求: 实现对BigCloneBench中函数体的克隆检测，必须标注出起始⾏号和终⽌⾏号. 问题: 给定⼀个Java⽂件，从中提取出每个函数的起始⾏和终⽌⾏. 难点: 这个问题的难点在于，对于Ja ...
抽象语法树简介(ZZ)
编程语⾔的实现，从AST(抽象语法树)开始
【JAVA-JDT-AST】Java抽象语法树的构建、遍历及转成dot格式(附Github源码)
Background: 最近为了重现tree-based clone detection的论⽂:L. Jiang, G. Misherghi, Z. Su, and S. Glondu. Deckar ...
五分钟学会 Kotlin 语法
为什么使⽤Kotlin 项⽬⼀期在收尾了终于有时间折腾了,⼀个多⽉以来Kotlin从⼊门到现在，坚持⽤来开
发的切⾝感受.因为语法与Java的区别挺⼤的⼀开始很想放弃，如果不是因为项⽬在使⽤，想必很少⼈ ...
JavaScript抽象语法树英⽂对照
type:"Program" //顶级对象类型 type:"Identifier" // 标识符 type:"FuncationDeclaration ...
《深⼊理解Android虚拟机内存管理》⽰例程序编译阶段⽣成的各种语法树完整版
随机推荐
SVN(TortoiseSVN&rpar；提交时忽略bin跟obj⽬录
SVN(TortoiseSVN)提交时忽略bin和obj⽬录 ⼀般协作开发情况下，有意思⽆意将bin和obj⽬录添加到版本管理中是很烦⼈的事⼉，在VS中不断地编译程序集和提交将带来版本暴增问题.如果你 ...
Scanner 和 String 类的常⽤⽅法
Scanner类是在jdk1.5 之后有了这个: 常⽤格式是: Scanner sc = new Scanner(System.in); 从以下版本
开始: 1.5 构造⽅法摘要Scanner(Fil ...
关于Rotation和Quaternion的⼀些问题
当我们使⽤unity的时候,⾯对⼀个物体,⼀个不可避免的问题就是：控制物体的旋转. unity的Transform组件的第⼆个属性Rotation为我们提供控制物体旋转的功能.在⼀个物体的Inspec ...
selenium + python 登录页⾯，输⼊账号、密码，元素定位问题
⽰例简介: 要求：登录QQ邮箱，输⼊账号.密码 出现问题：页⾯中含有iframe框架，因此直接进⾏元素的查与操作，出现不到元素的现象,⾸先需进⾏iframe框架的转换，使⽤switch_to_fr ...
quest
function create(){ var itstate = $("#myselect").val(); quest({ url: '/servlet/A ...
Java的家庭记账本程序(E)
⽇期:2019.2.9 博客期:032 星期⼆ 今天是把程序的相关Bug补⼀补，嗯`: 1.添加了跳转说明 ⽣成了⼀个对于成员的权限声明内容,⽤户再登陆界⾯点击Go按钮后，切换⾄说明页⾯，再次点击Go ...
Spring Boot 学习笔记1——初体验之3分钟启动你的Web应⽤[z]
前⾔ 早在去年就简单的使⽤了⼀下Spring Boot，当时就被其便捷的功能所震惊.但是那是也没有深⼊的研究，随着其在业界被应⽤的越来越⼴泛，因此决定好好地深⼊学习⼀下，将⾃⼰的学习⼼得在此记录，本⽂ ...
linux系统中的变量
⼀.定义 所谓的变量，就是就是利⽤⼀个特定的"名称"(name)来存取⼀段可以变化的"值"(value)，简单说来就是“⽤⼀个名称储存⼀个数值”.  ⼆.设定 ...
Python基础-I/O模型
⼀.I/O模型 IO在计算机中指Input/Output，也就是输⼊和输出.由于程序和运⾏时数据是在内存中驻留，由CPU这个超快的计算核⼼来执⾏，涉及到数据交换的地⽅，通常是磁盘.⽹络等，就需要IO接 ...
BloomFilter布隆过滤器使⽤
从上⼀篇可以得知,BloomFilter的关键在于hash算法的设定和bit数组的⼤⼩确定，通过权衡得到⼀个错误概率可以接受的结果. 算法⽐较复杂，也不是我们研究的范畴，我们直接使⽤已有的实现. go ...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。