Babel

25th June 2020 at 5:46pm
Web Frontend: Build Tool

Babel 是一个 JavaScript 转译器(transpiler),它把高版本的 ECMAScript 转译成低版本的,用来兼容仍未支持高版本的运行环境。比如有些浏览器并不支持 ES2015 的特性,那么 Babel 可以把 ES2015 的代码转换成 ES3 的,这样这些浏览器就可以运行了。Babel 的另一大使用场景,是将 React 的 JSX 转译成 JS 代码。

概念和设施

前端:Babel 提供了 CLI 和 API 等多种模式,供用户(用 CLI)、构建系统(如 Babel)、测试框架(如 Jest)等使用。Setup 页 显示了各种整合方式。其中 @babel/core 包是核心。

插件:Babel 提供的一系列 插件,每个插件实际上实现了一套转换规则,如 @babel/plugin-transform-spread,把 spread syntax 转换成未支持 ES2015 环境可以运行的代码:

// Input
var a = ['a', 'b', 'c'];
var b = [...a, 'foo'];
var c = foo(...a);

// Output
var a = ['a', 'b', 'c'];
var b = a.concat(['foo']);
var c = foo.apply(void 0, a);

预设集:Babel 提供了 presets,表示一套特定的插件合集。官方也提供了一些核心的 presets:

配置:一般配些 preset 或者 plugin。见 官方文档

快速上手

参考官方的 Setup 文档。其中 CLI 和 Webpack 应该是最常见的场景。