Babel 的处理流程

作为一个transpiler，Babel处理的事情比较简单，就是将各种形式的源代码翻译成目标环境的代码，整个过程主要由三个部分组成，如下图所示:

Parse

将源代码转换为Abstract Syntax Tree(AST),Babel 相关的AST Node Types详见spec,这个过程会涉及到@babel/plugin-syntax-*相关的插件，并且这个过程不支持自定义插件，只能通过配置来增减需要的官方插件。整个 Parse 的过程我们基本上不需要做什么，Babel 会把最终的 AST 返回给我们以便进行后续的遍历和转换操作。

Introduction

Babel 在 2021 年一共进行了 2 个minor版本的更新，增加了一些Stage 4 proposals的支持，以及一些Top-level的配置项（targets, assumptions）。伴随着这些更新，结合babel-loader和babel-preset-react-app我们来探究一下在 2021 年该如何使用 Babel。

@babel/preset-env

@babel/preset-env是官方推荐的preset,只需要配置相关的targets就可以转换当前代码到目标环境的代码，遵循browserslist的相关配置，主要配置项如下:

targets

配置目标环境，如果不指定，则会转换所有 ES2015-ES2020 的代码到 ES5.而不是使用 browserslist 的defaults配置（> 0.5%, last 2 versions, Firefox ESR, not dead）。

useBuiltIns

配置@babel/preset-env如何处理polyfills，可选项为"usage"|"entry"|false

"entry"

这个配置会自动将import "core-js/stable";和import "regenerator-runtime/runtime"转换为目标环境的按需引入，举个例子:

1
2

import 'core-js/stable';
import 'regenerator-runtime/runtime';

在不同环境下可能转换为:

1
2

import 'core-js/modules/es.string.pad-start';
import 'core-js/modules/es.string.pad-end';

但是有个缺点是用不到的 polyfill 也可能会引入进来，因为entry配置只针对目标环境，而不是具体代码

"usage"

这个配置则会自动引入代码中需要的 polyfill，且不需要显示声明import core-js，推荐使用该配置

false

不自动添加 polyfill，也不自动转换import core-js为按需引入

corejs

当 useBuiltIns 配置项为entry或usage时生效，默认值为"2.0"，建议配置为minor version的具体版本号