Babel简介

Babel 的介绍

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

babel 是巴别塔的意思，来自圣经中的典故：

当时人类联合起来兴建希望能通往天堂的高塔，为了阻止人类的计划，上帝让人类说不同的语言，使人类相互之间不能沟通，计划因此失败，人类自此各散东西。此事件，为世上出现不同语言和种族提供解释。这座塔就是巴别塔。

这很符合 babel 的转译器的定位。

babel 的用途

我们平时主要用 babel 来做 3 种事情：

1. 转译 esnext、typescript、flow等到目标环境支持的js
   这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现。并且还可以把目标环境不支持的 api 进行 polyfill。babel7 支持了 preset-env，可以指定 targets 来进行按需转换，转换更加的精准，产物更小。

2. 一些特定用途的代码转换
   babel 是一个转译器，暴露了很多 api，用这些 api 可以完成代码到 AST 的 parse，AST 的转换，以及目标代码的生成。开发者可以用它来来完成一些特定用途的转换，比如函数插桩（函数中自动插入一些代码，例如埋点代码）、自动国际化、default import 转 named import 等。现在比较流行的小程序转译工具 taro，就是基于 babel 的 api 来实现的。

3. 代码的静态分析
   对代码进行 parse 之后，能够进行转换，是因为通过 AST 的结构能够理解代码。理解了代码之后，除了进行转换然后生成目标代码之外，也同样可以用于分析代码的信息，进行一些检查。

• linter 工具就是分析 AST 的结构，对代码规范进行检查。
• api 文档自动生成工具，可以提取源码中的注释，然后生成文档。
• type checker 会根据从 AST 中提取的或者推导的类型信息，对 AST 进行类型是否一致的检查，从而减少运行时因类型导致的错误。
• 压缩混淆工具，这个也是分析代码结构，进行删除死代码、变量名混淆、常量折叠等各种编译优化，生成体积更小、性能更优的代码。
• js 解释器，除了对 AST 进行各种信息的提取和检查以外，我们还可以直接解释执行 AST。

总结

babel 的名字来自巴别塔的典故，是一个 js 转译器，用于 es next、typescript等代码的转换，同时还暴露出了 api 让开发者可以进行特定用途的转换。除此以外，还可以做各种静态分析。