Babel 重学版

babel 是一个 JS、TS 的编译器，它能把新语法写的代码转换成目标环境支持的语法的代码，并且对目标环境不支持的 api 自动 polyfill。 babel 基本每个项目都用，大家可能对 @ba

上一节我们学习了 babel 插件的分类、babel 的 preset、helper、runtime。babel 的功能基本都建立在这些之上。 我们通过插件完成了各种代码（es next、propos

从 6to5 改名到了 babel，但是做的事情并没有变，依然是从高版本语法和 api 转换成低版本的语法并自动 polyfill 缺少的 api。 babel 是怎么实现这些功能的呢？ 从插件到 p

单测就是文档，可以根据单测了解插件的功能 代码改动跑一下单测就知道功能是否正常，快速回归测试，方便后续迭代 那 babel 插件应该怎样做单测？ babel 插件单元测试的方式 babel 插件做的事

学习一下 babel 插件的格式以及 preset。 plugin 使用 如果需要传参就用数组格式，第二个元素为参数。 babel plugin 有两种格式 返回对象的函数 入参 插件函数有 3 个参

如何 在代码中展示 问题 核心就是这三个问题： 如何打印出标记相应位置代码的 code frame（就是上图的打印格式） 如何实现语法高亮 如何在控制台打印颜色 如何打印 code frame 其实就

AST 转换完之后就到了 generate 阶段，genenrate 是怎么生成目标代码和 sourcemap 的呢？sourcemap 有啥作用呢？ 本节就来看看 generate 的㊙️㊙️ ge

源码 parse 成 AST 之后，需要进行 AST 的遍历和增删改（transform）。那么 transform 的流程是什么样的？ babel 会递归遍历 AST，遍历过程中处理到不同的 AST

前言 babel 的 parser 是基于 acorn 扩展而来的，而 acorn 也不是最早的 js parser，js parser 的历史是怎样的？ 各种 parser 之间的关系是什么样的呢？

目的 只是学习概念，还不够需要实战敲一下 才靠谱 实战需求 思路分析 代码实现 结果展示 简化判断条件 改个需求试试？ 这个事情 工作遇到就很烦，但 这里不是工作 哈哈 分析 代码实现 改成插件试试

目的 使用 API 才能操作 AST babel 的 api 有哪些 babel 的编译流程分为三步：parse、transform、generate，每一步都暴露了一些 api 出来（类似于vue/

常见的 AST 节点 AST 是对源码的抽象，字面量、标识符、表达式、语句、模块语法、class 语法都有各自的 AST。 Literal Literal 是字面量 Identifer Identif

过程 babel 是 source to source 的转换，整体编译流程分为三步： parse：通过 parser 把源码转成抽象语法树（AST） transform：遍历 AST，调用各种 tr

名称来历 babel 最开始叫 6to5，顾名思义是 es6 转 es5，但是后来随着 es 标准的演进，有了 es7、es8 等， 6to5 的名字已经不合适了，所以改名为了 babel。 babe