Babel 是如何工作的

Babel 工作流程

Source code

AST

parse by Babylon

Modified AST

Compiled Code

generate by

babel-generator

transform by

babel-traverse and plugins

例子

Source code

AST

AST

Modified AST

Modified AST

Compiled code

Babel 工作流程

babel-core

babel.transformFile(filename, options?, callback)

babel.transformFileSync(filename, options?)

babel.transformFromAst(ast, code?, options?)

Babel 核心功能，提供 node 编程接口。

babel-cli

babel-core 包装成的命令行工具。

babel-loader

基于 babel-core，在 webpack 中使用 babel 编译文件。

babel-loader

基于 babel-core，在 webpack 中使用 babel 编译文件。

配置

• 默认都会使用 .babelrc 里的配置。从当前所编译文件所在目录开始寻找 .babelrc 文件，如果没有再往上一级目录。

• babel-core 通过接口参数传入 options

• babel-cli、babel-node 通过命令行参数

• babel-loader 通过 webpack 配置的 loader 参数

Plugins

Babel 负责解析 AST和遍历 AST，在遍历时使用 plugins 修改 AST，再将修改后的 AST 树生成代码。

真正修改 AST 的是 plugins。

例如：

babel-plugin-transform-es2015-arrow-functions

babel-plugin-transform-es2015-classes

babel-plugin-transform-object-rest-spread

Presets

一个 preset 是一组 plugins 和 presets 的集合。

为了方便配置，我们将经常一起使用的 plugins 定义成一个 preset。

官方 Presets

• env
• es2015
• es2016
• es2017
• latest (deprecated)
• react
• flow

• Stage 0 
• Stage 1
• Stage 2
• Stage 3

Polyfill

某些语法不能通过转换 AST 实现，例如：

新增的内置对象：Promise、Map、Set

内置对象的静态方法：Object.asign、Array.from

内置对象的原型方法：Array.prototype.includes

generator 函数

我们需要引入“补丁”。

Polyfill

方式一：在入口模块顶部引入 babel-polyfill。

• 引入方式简单
• 包含所有补丁
• 体积大
• 污染全局环境

Polyfill

方式二：使用 babel-plugin-transform-runtime 插件

• 按需引入补丁
• 引入的模块都是局部变量，不会污染全局环境
• 不支持原型方法

参考

Writing custom Babel and ESLint plugins with ASTs (Open West 2017)

Babel under the hood

The Six Things You Need To Know About Babel 6