解剖Babel —— 向前端架构师迈出一小步

矫情吗；* 2022-11-04 14:21 21阅读 0赞

当聊到`Babel`的作用，很多人第一反应是：用来实现`API polyfill`。

事实上，`Babel`作为前端工程化的基石，作用远不止这些。

作为一个庞大的家族，`Babel`生态中有很多概念，比如：`preset`、`plugin`、`runtime`等。

这些概念使初学者对`Babel`望而生畏，对其理解也止步于`webpack`的`babel-loader`配置。

本文会从`Babel`的核心功能出发，一步步揭开`Babel`大家族的神秘面纱，向前端架构师迈出一小步。

## Babel是什么 ##

> Babel 是一个 JavaScript 编译器。

作为`JS`编译器，`Babel`接收输入的`JS`代码，经过内部处理流程，最终输出修改后的`JS`代码。

![8b77d97a63bcea101d2649b7d739f1b2.png][]

在`Babel`内部，会执行如下步骤：

1.  将`Input Code`解析为`AST`（抽象语法树）,这一步称为`parsing`
2.  编辑`AST`，这一步称为`transforming`
3.  将编辑后的`AST`输出为`Output Code`，这一步称为`printing`

![d6fa4997941e2f72c7f7d7a5978906f2.png][]

从Babel仓库\[1\]的源代码，可以发现：`Babel`是一个由几十个项目组成的`Monorepo`。

其中`babel-core`提供了以上提到的三个步骤的能力。

在`babel-core`内部，更细致的讲：

*  `babel-parser`实现第一步
 *  `babel-generator`实现第三步

要了解第二步，我们需要简单了解下`AST`。

## AST的结构 ##

进入AST explorer\[2\]，选择`@babel/parser`作为解析器，在左侧输入：

const name = ['ka', 'song'];

可以解析出如下结构的`AST`，他是`JSON`格式的树状结构：

![a2b54000cd86c6de4da0ef9356c17459.png][]

在`babel-core`内部：

*  `babel-traverse`可以通过**「深度优先」**的方式遍历`AST`树
 *  对于遍历到的每条路径，`babel-types`提供用于修改`AST`节点的节点类型数据

所以，整个`Babel`底层编译能力由如下部分构成：

![6be0c19ba4d349f4b3aff34326dc469f.png][]

当我们了解`Babel`的底层能力后，接下来看看基于这些能力，上层能实现什么功能？

## Babel的上层能力 ##

基于`Babel`对`JS`代码的编译处理能力，`Babel`最常见的上层能力为：

*  `polyfill`
 *  `DSL`转换（比如解析`JSX`）
 *  语法转换（比如将高级语法解析为当前可用的实现）

由于篇幅有限，这里仅介绍`polyfill`与**「语法转换」**相关功能。

## polyfill ##

作为前端，最常见的`Babel`生态的库想必是`@babel/polyfill`与`@babel/preset-env`。

使用`@babel/polyfill`或`@babel/preset-env`可以实现高级语法的降级实现以及`API`的`polyfill`。

从上文我们知道，`Babel`本身只是`JS`的编译器，以上两者的转换功能是谁实现的呢？

答案是：`core-js`

## core-js简介 ##

`core-js`是一套模块化的`JS`标准库，包括：

*  一直到`ES2021`的`polyfill`
 *  `promise`、`symbols`、`iterators`等一些特性的实现
 *  `ES`提案中的特性实现
 *  跨平台的`WHATWG / W3C`特性，比如`URL`

![69d681e7eb9565f0a1d7153a37a8eee7.png][] core-js作者Denis Pushkarev

从core-js仓库\[3\]看到，`core-js`也是由多个库组成的`Monorepo`，包括：

*  core-js-builder
 *  core-js-bundle
 *  core-js-compat
 *  core-js-pure
 *  core-js

我们介绍其中几个库：

### core-js ###

`core-js`提供了`polyfill`的核心实现。

import 'core-js/features/array/from'; 
    import 'core-js/features/array/flat'; 
    import 'core-js/features/set';        
    import 'core-js/features/promise';    
    
    Array.from(new Set([1, 2, 3, 2, 1]));          // => [1, 2, 3]
    [1, [2, 3], [4, [5]]].flat(2);                 // => [1, 2, 3, 4, 5]
    Promise.resolve(32).then(x => console.log(x)); // => 32

直接使用`core-js`会污染全局命名空间和对象原型。

比如上例中修改了`Array`的原型以支持数组实例的`flat`方法。

### core-js-pure ###

`core-js-pure`提供了独立的命名空间：

import from from 'core-js-pure/features/array/from';
    import flat from 'core-js-pure/features/array/flat';
    import Set from 'core-js-pure/features/set';
    import Promise from 'core-js-pure/features/promise';
    
    from(new Set([1, 2, 3, 2, 1]));                // => [1, 2, 3]
    flat([1, [2, 3], [4, [5]]], 2);                // => [1, 2, 3, 4, 5]
    Promise.resolve(32).then(x => console.log(x)); // => 32

这样使用不会污染全局命名空间与对象原型。

### core-js-compat ###

`core-js-compat`根据`Browserslist`维护了不同宿主环境、不同版本下对应需要支持特性的集合。

> Browserslist\[4\]提供了不同浏览器、`node`版本下`ES`特性的支持情况

![22506fd0f987ee168cc0b6cf6ad5db80.png][] Browserslist

比如：

"browserslist": [
        "not IE 11",
        "maintained node versions"
      ]

代表：非`IE`11的版本以及所有`Node.js`基金会维护的版本。

## @babel/polyfill与core-js关系 ##

`@babel/polyfill`可以看作是：`core-js`加`regenerator-runtime`。

> `regenerator-runtime`是`generator`以及`async/await`的运行时依赖

单独使用`@babel/polyfill`会将`core-js`全量导入，造成项目打包体积过大。

> 从Babel v7.4.0\[5\]开始，`@babel/polyfill`被废弃了，可以直接引用`core-js`与`regenerator-runtime`替代

为了解决全量引入`core-js`造成打包体积过大的问题，我们需要配合使用`@babel/preset-env`。

## preset的含义 ##

在介绍`@babel/preset-env`前，我们先来了解`preset`的意义。

初始情况下，`Babel`没有任何额外能力，其工作流程可以描述为：

const babel = code => code;

其通过`plugin`对外提供介入`babel-core`的能力，类似`webpack`的`plugin`对外提供介入`webpack`编译流程的能力。

`plugin`分为几类：

*  `@babel/plugin-syntax-*`语法相关插件，用于新的语法支持。比如babel-plugin-syntax-decorators\[6\]提供`decorators`的语法支持
 *  `@babel/plugin-proposal-*`用于`ES`提案的特性支持，比如`babel-plugin-proposal-optional-chaining`是`可选链操作符`特性支持
 *  `@babel/plugin-transform-*`用于转换代码，`transform`插件内部会使用对应`syntax`插件

多个`plugin`组合在一起形成的集合，被称为`preset`。

## @babel/preset-env ##

使用`@babel/preset-env`，可以**「按需」**将`core-js`中的特性打包，这样可以显著减少最终打包的体积。

这里的**「按需」**，分为两个粒度：

*  宿主环境的粒度。根据不同宿主环境将该环境下所需的所有特性打包
 *  按使用情况的粒度。仅仅将使用了的特性打包

我们来依次看下。

### 宿主环境的粒度 ###

当我们按如下参数在项目目录下配置`browserslist`文件（或在`@babel/preset-env`的`targets`属性内设置，或在`package.json`的`browserslist`属性中设置）：

not IE 11
    maintained node versions

会将**「非IE11」**且**「所有Node.js基金会维护的node版本」**下需要的特性打入最终的包。

显然这是利用了刚才介绍的`core-js`这个`Monorepo`下的`core-js-compat`的能力。

### 按使用情况的粒度 ###

更理想的情况是只打包我们使用过的特性。

这时候可以设置`@babel/preset-env`的`useBuiltIns`属性为`usage`。

比如：

`a.js`：

var a = new Promise();

`b.js`：

var b = new Map();

当宿主环境不支持`promise`与`Map`时，输出的文件为：

`a.js`：

import "core-js/modules/es.promise";
    var a = new Promise();

`b.js`：

import "core-js/modules/es.map";
    var b = new Map();

当宿主环境支持这两个特性时，输出的文件为：

`a.js`：

var a = new Promise();

`b.js`：

var b = new Map();

## 进一步优化打包体积 ##

打开babel playground\[7\]，输入：

class App {}

会发现编译出的结果为：

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
    
    var App = function App() {
      "use strict";
    
      _classCallCheck(this, App);
    };

其中`_classCallCheck`为辅助方法。

如果多个文件都使用了`class`特性，那么每个文件打包对应的`module`中都将包含`_classCallCheck`。

为了减少打包体积，更好的方式是：需要使用**「辅助方法」**的`module`都从同一个地方引用，而不是自己维护一份。

`@babel/runtime`包含了`Babel`所有**「辅助方法」**以及`regenerator-runtime`。

单纯引入`@babel/runtime`还不行，因为`Babel`不知道何时引用`@babel/runtime`中的**「辅助方法」**。

所以，还需要引入`@babel/plugin-transform-runtime`。

这个插件会在编译时将所有使用**「辅助方法」**的地方从**「自己维护一份」**改为从`@babel/runtime`中引入。

所以我们需要将`@babel/plugin-transform-runtime`置为`devDependence`，因为他在编译时使用。

将`@babel/runtime`置为`dependence`，因为他在运行时使用。

## 总结 ##

本文从底层向上介绍了前端日常业务开发会接触的`Babel`大家族成员。他们包括：

### 底层 ###

`@babel/core`（由`@babel/parser`、`@babel/traverse`、`@babel/types`、`@babel/generator`等组成）

他们提供了`Babel`编译`JS`的能力。

> 注：这里`@babel/core`为库名，前文中`babel-core`为其在仓库中对应文件名

### 中层 ###

`@babel/plugin-*`

`Babel`对外暴露的`API`，使开发者可以介入其编译`JS`的能力

### 上层 ###

`@babel/preset-*`

日常开发会使用的插件集合。

对于立志成为前端架构师的同学，`Babel`是前端工程化的基石，学懂、会用他是很有必要的。

能看到这里真不容易，给自己鼓鼓掌吧。

![5e73b7a1c9faa66b6ebc420d2d21759c.png][] 希斯特利亚笔芯

### 参考资料 ###

\[1\]

Babel仓库: https://github.com/babel/babel/tree/main/packages

\[2\]

AST explorer: https://astexplorer.net/

\[3\]

core-js仓库: https://github.com/zloirock/core-js/tree/master/packages

\[4\]

Browserslist: https://github.com/browserslist/browserslist

\[5\]

Babel v7.4.0: https://babeljs.io/docs/en/babel-polyfill\#docsNav

\[6\]

babel-plugin-syntax-decorators: https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators

\[7\]

babel playground: https://babeljs.io/repl\#?browsers=&build=&builtIns=false&spec=false&loose=false&code\_lz=MYGwhgzhAECCAO9oG8C-Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=script&lineWrap=true&presets=env&prettier=false&targets=&version=7.13.7&externalPlugins=babel-plugin-transform-regenerator%406.26.0

## 关于奇舞精选 ##

《奇舞精选》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

奇舞团是360集团最大的大前端团队，代表集团参与W3C和Ecma会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队Leader等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![a55b9f83b766078aaca2dc41ea8700a3.png][]

[8b77d97a63bcea101d2649b7d739f1b2.png]: /images/20221023/db6187e21df14ce096a3bc1c1a3b0689.png
[d6fa4997941e2f72c7f7d7a5978906f2.png]: /images/20221023/7fe43dd65ced4db68a4da37a431d557c.png
[a2b54000cd86c6de4da0ef9356c17459.png]: /images/20221023/8b84eb356a5c420da0cfad0968fde187.png
[6be0c19ba4d349f4b3aff34326dc469f.png]: /images/20221023/5e116d35dae24f7195a6db6d237e606a.png
[69d681e7eb9565f0a1d7153a37a8eee7.png]: /images/20221023/adb07135c82c48d485e26d0ef5ae3852.png
[22506fd0f987ee168cc0b6cf6ad5db80.png]: /images/20221023/fd6f06f47097434eb67cfeb9898902b6.png
[5e73b7a1c9faa66b6ebc420d2d21759c.png]: /images/20221023/02b9721b737a4842ad29134029ef9051.png
[a55b9f83b766078aaca2dc41ea8700a3.png]: /images/20221023/9f017badb2ad46a78acb2e7158e21824.png