Guide To Babel in 2021

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"转换为目标环境的按需引入，举个例子:

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

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

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的具体版本号