AST 介绍

AST 是什么？ AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构。它由一堆节点（Node）组成，每个节点都表示源代码中的一种结构。不同结构用类型来区分，常见的类型有： Identifier(标识符)，BinaryExpression(二元表达式)，VariableDeclaration(变量定义)，FunctionDeclaration(函数定义)等。 AST是编译器看的。编译器会将源码转化成AST。如下源码: var a = 42; var b = 5; function addA(d) { return a + d; } var c = addA(2) + b; 会换转化成这样的AST: AST 的使用场景？ TypeScript、babel、webpack、vue-cli 得都是依赖 AST 进行开发的。 通过AST，可以将代码转化后，再输出。比如： 代码压缩。删除没用的空格，未使用的语句，变量名替换等。 代码高亮。 将 ES6 代码转换成 ES5 代码。 给 CSS 中的某些属性加浏览器前缀-webkit-。 将 CSS 中的px转化成rem。 生成代码。最近用了ANT DESIGN PRO。 ANT DESIGN PRO 中的 umi 可以在生成页面的代码和路由时，修改路由配置的js。umi 这种方式，用户体验很好。因此，我准备用这种方式来改造我之前做的代码生成工具。修改路由配置需要通过AST来转换代码。 需要学习 AST 的哪些知识？ 0 了解AST常见节点的结构 了解AST常见节点的结构推荐通读下AST node 规范。 1 源码解析 将源码转化为AST。该步骤分为词法分析（Lexical Analysis）和 语法分析（Syntactic Analysis）。 解析 JavaScript 可以用@babel/parser(以前叫 Babylon)。 2 转换 在遍历AST时，对指定的AST节点做新增，修改或删除操作。 转换可以用@babel/traverse。 创建和验证节点可以用@babel/types。创建AST节点代码示例见这里。 3 生成目标代码 将上一步转换过的AST，转化为目标代码，并生成源码映射（source maps）。 生成目标代码可以用@babel/generator 工具 AST 浏览器 AST 可视化工具 npm 包 recast AST工具库。解析AST(parse)，遍历AST，修改AST，生成代码。官方文档太简单了。 @babel/template 它能让你编写字符串形式且带有占位符的代码来代替手动编码， 尤其是生成的大规模 AST的时候。 在计算机科学中，这种能力被称为准引用（quasiquotes）。 资源&文章推荐 Babel 插件手册 透過製作 Babel-plugin 初訪 AST AST 与前端工程化实战

本文章由javascript技术分享原创和收集