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

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

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

babel的用途 ​

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

转译esnext、typescript、flow等到目标环境支持的js ​

这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现。并且还可以把目标环境不支持的 api 进行 polyfill。

babel7 提供了 @babel/preset-env 的包，可以指定目标 env 来按需转换，转换更加的精准，产物更小。

一些特定用途的代码转换 ​

babel 是一个转译器，暴露了很多 api，用这些 api 可以完成代码到 AST 的解析、转换、以及目标代码的生成。

开发者可以用它来完成一些特定用途的转换，比如函数插桩（函数中自动插入一些代码，例如埋点代码）、自动国际化等。

流行的小程序转译工具 taro，就是基于 babel 的 api 来实现的。

代码的静态分析 ​

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

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

上面这些静态分析的工具后面的实战章节都会讲。

这 3 部分的用途小册都会深入探索。实战案例代码 - @github

总结 ​

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

这一节概括了后面的内容和实战案例，可以对整体内容有一个初步的认识。

相关链接：

• 实战案例代码 - @github

2023年03月16日14:24:13