Skip to content
On this page

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

用途

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

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

babel7 支持了 preset-env,可以指定 targets 来进行按需转换,转换更加的精准,产物 更小。

一些特定用途的代码转换

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

开发者可以用它来来完成一些特定用途的转换,比如函数插桩(函数中自动插入一些代码, 例如埋点代码)、自动国际化、default import 转 named import 等。这些都是后面的实 战案例。

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

代码的静态分析

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

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