在现代 Web 应用中，为了让代码能在生产环境高性能的运营，源代码往往需要被编译打包，进行死码删除，代码转换等处理。Babel 和 Typescript 是目前最常用的两个编译器

了解过抽象语法树，又称AST，有学习过，也写过一个基于AST的乞丐版模板引擎，先是词法解析token，然后生产抽象语法树，然后更改抽象语法树，当然这是插件做的事情，最后根据新的AST生成代码。

当我们执行 fetchValue() 的时候，执行的其实就是 _asyncToGenerator 返回的这个匿名函数，在匿名函数中，我们执行了

具体的执行过程就不说了，我们直接在 Babel 官网的 Try it out 粘贴上述代码，然后查看代码被编译成了什么样子：

都说 ES6 的 Class 是 ES5 的语法糖，那么 ES6 的 Class 是如何实现的呢？其实现继承的原理又是什么呢？不妨我们通过 Babel 转译代码的方式，看看其中有什么门道。

第一步可以说是是编译器的基本功能，通过解析器将原始代码转换成抽象语法树（AST），顾名思义就是描述语法的数据结构，一般在这一步编译器都会做两件事：语法分析与语义分析。语法分析是去定义原始代码中的内容是否应该被认为一个单位，然后是语义分析

学习 babel 时，遇到的问题，使用旧版本 babel 命名规则安装后运行报错，初步查找到原因是因为 babel 各个preset和plugin新旧不同版本之间存在兼容问题，提示使用 npx babel-upgrade 可以自动升级，但是我升级失败了

babel：将浏览器不支持的ES6语法转为javascript，初始化package.json文件：描述当前项目信息，包括依赖等，创建配置文件，告诉babel用什么规则来编译文件.babelrc

为了支持业务中少量的es6+的高级特性，最近在研究了一下babel的垫片，现将此整理为文字，如下。简单来讲，babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。

说实话，我从工作开始就一直在接触babel，然而对于babel并没有一个清晰的认识，只知道babel是用于编译javascript，让开发者能使用超前的ES6+语法进行开发。自己配置babel的时候，总是遇到很多困惑，下面我就以babel@7为例

谈@babel/preset-typescript的优越性之前，还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器

因为在webpack中，默认只能处理一部分es6的语法，一些更高级的es6和es7语法webpack不能处理，这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法

对 Babel 的配置项的作用不那么了解，是否会影响日常开发呢？老实说，大多情况下没有什么影响。不过呢，还是想更进一步了解下，于是最近认真阅读了 Babel 的文档，外加不断编译验证

可以发现实现一个 Babel macros 的过程与开发 Babel 插件的流程类似，都是对 AST 进行操作。babel-plugin-macro 只是提供一个在“外部”进行 AST 修改的方式，通过这种方式能够灵活的对 Babel 编译时进行拓展

说起编译原理，可能我们脑海中首先浮现的就是 “编译器” 这个词汇。维基百科上对编译器的定义是： 编译器是一种计算机程序，它会将某种编程语言写成的源代码（原始语言）转换成另一种编程语言（目标语言）