Babel为当前最流行的代码JavaScript编译器了，其使用的JavaScript解析器为babel-parser，最初是从Acorn 项目fork出来的。Acorn 非常快，易于使用，并且针对非标准特性(以及那些未来的标准特性) 设计了一个基于插件的架构。本文主要介绍es…

babel 是怎么实现的，编译流程是什么，内部有哪些包，如何从 0 到 1 写一个简易 babel，这篇文章帮你理清思路

正如前面提到的，解析器会建立一个结构来表示程序的语义。AST节点是一个普通的JavaScript对象，它有一个类型属性，指定它是什么类型的节点，以及根据特定类型指定的附加信息。 { type: "lambda", vars: [ NAME... ], body: AST } {…

Javascript 代码的解析（Parse ）步骤分为两个阶段：词法分析（Lexical Analysis）和 语法分析（Syntactic Analysis）。这个步骤接收代码并输出 抽象语法树，亦称 AST。 随着 Babel 的生态越来越完善，我们通常会使用 Babel…

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。 在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结…

本文尝试构建一个 Web 前端模板引擎，并且把这个引擎和 Virtual-DOM 进行结合。把传统模板引擎编译成 HTML 字符串的方式改进为编译成 Virtual-DOM 的 render 函数，可以有效地结合模板引擎的便利性和 Virtual-DOM 的性能。类似 ReactJS 中的 JSX。

前几天看到 Github 上一个非常好的编译器 Demo： https://github.com/thejameskyle/the-super-tiny-compiler 虽然是一个很小很小的并没有什么卵用的编译器，但可以向我们展示编译器的很多东西。 昨天和今天有空，把它翻译了出来，如果可以的话，建议直接去这里看代码，Github 上的阅读体验更好

我们编写的babel插件是所属于babel-loader,而babel-loader基本运行与webpack环境.所以为了检测babel插件的是否起作用，我们必须构建webpack环境. babel-traverse对AST树进行解析遍历出整个树的path. plugin转换出…

在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是「抽象」的，是因为这里的语法并不会表示出真实语法中出现的每个细节。1