形象语法树（Abstract Syntax Tree, AST），是源代码的形象语法结构的树状示意，与之对应的是具体语法树；之所以是形象的，是因为形象语法树并不会示意出实在语法中呈现的每一个细节，而且是文法无关、不依赖于语言的细节；能够把AST设想成一套标准化的编程语言接口定义，只不过这一套标准，是针对编程语言自身的，小到…

前端开发中，应用了很多工具，譬如webpack、eslint来晋升研发效率，但咱们并不知道这些工具的实现原理。基于这些工具的外围都是形象语法树，那咱们就从形象语法树开始了解底层原理的新世界吧。

AST 是 Abstract Syntax Tree 的缩写，即 “形象语法树”.它是以树状的模式体现编程语言的语法结构. webpack 打包 JS 代码的时候，webpack 会在咱们的原有代码根底上新增一些代码， 例如咱们能够在打包JS 代码的时候将高级代码转为低级代码，就是通过 AST 语法树来实现的AST在线生成地址babel插件查看应用地址

如果你查看目前任何支流的我的项目中的devDependencies，会发现前些年的成千上万的插件诞生。咱们演绎一下有：ES6转译、代码压缩、css预处理器、eslint、prettier等。这些模块很多都不会用到生产环境，然而它们在开发环境中起到很重要的作用，这些工具的诞生都是建设在了AST这个伟人的肩膀上。

AST 解析器工作中常常用到，Vue.js 中的 VNode 就是如此！ 其实如果有须要将 非结构化数据转 换成 结构化对象用 来剖析、解决、渲染的场景，咱们都能够用此思维做转换。

在讲之前先简略介绍一下什么AST,形象语法树（Abstract Syntax Tree）简称 AST，是源代码的形象语法结构的树状表现形式。平时很多库都有他的影子:例如 babel, es-lint, node-sass, webpack 等等。

在讲之前先简略介绍一下什么AST,形象语法树（Abstract Syntax Tree）简称 AST，是源代码的形象语法结构的树状表现形式。平时很多库都有他的影子:例如 babel, es-lint, node-sass, webpack 等等。