跳至主内容

7.11.0 版本发布:preset-env 支持 ECMAScript 2021、TypeScript 4.0 支持、配置打印及 `babel-eslint` 的未来

· 1 分钟阅读
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

我们刚刚发布了 Babel 的新次版本更新!

本次 7.11 版本更新包含:

  • preset-env 支持逻辑赋值 (??=)、数字分隔符 (1_2) 和命名空间重新导出 (export * as ns from ...)

  • TypeScript 4.0 支持

  • 解析器支持阶段 1 的 Decimal 提案 (7.11m)

  • 新增环境变量标志,用于打印指定文件的已解析 Babel 配置 (BABEL_SHOW_CONFIG_FOR)

此外,我们正式发布 babel-eslint 的继任者:@babel/eslint-parser

您可以在 GitHub 上查看完整的更新日志。

若您有任何疑问或希望讨论的内容,我们已在仓库中启用 GitHub Discussions 功能!

若您或公司希望支持 Babel 及 JavaScript 生态发展,可通过 Open Collective 进行捐赠,更可直接参与新 ECMAScript 提案的实现!作为志愿者驱动的项目,我们依赖社区支持来服务广大 JavaScript 用户。欢迎通过 team@babeljs.io 联系我们!

ECMAScript 2021 支持 (#11864)

在最近的 TC39 会议中,逻辑赋值与数字分隔符提案已同时进入阶段 4!Babel 此前已通过 @babel/plugin-proposal-logical-assignment-operators@babel/plugin-proposal-numeric-separators 插件支持这些提案。现在它们已被纳入 @babel/preset-env,将根据目标环境进行编译,如同其他 ECMAScript 功能。

逻辑赋值

逻辑赋值提供了一种结合逻辑运算符与赋值表达式的简写语法:

JavaScript
this.disabled ??= false;
this.disabled ?? (this.disabled = false);

clicked &&= !isDoubleClicked();
clicked = clicked && !isDoubleClicked();

hasDups ||= (prev === cur);
if (!hasDup) hasDups = (prev === cur);

数字分隔符

数字分隔符 (_) 是一种可在数字字面量中插入于数字之间的字符,用于提升视觉区分度:

JavaScript
1_000_000_000
0.000_000_000_1

命名空间重新导出 (#11849)

导入的模块可作为新的命名空间重新导出:

JavaScript
export * as ns from "mod";
备注

该功能已包含在 ECMAScript 2020 中,但此前 @babel/preset-env 尚未支持。

自 7.11 版本起,若 caller 支持,@babel/preset-env 将跳过 @babel/plugin-proposal-export-namespace-from 转换:此时 export * as ns 将保留原样由打包器直接处理。注意babel-loader@rollup/plugin-babel 目前尚未告知 Babel 支持此语法,我们正与相关维护者合作解决此问题。

若设置 { modules: false },Babel 将假定转译后的代码会在支持原生 ESM 的引擎中运行。此时 export * as ns 将根据 targets 设置进行编译,如同其他 ECMAScript 功能。

若您计划打包转译后的代码,请移除 { modules: false } 选项。默认情况下,preset-env 会根据 babel-loader@rollup/plugin-babel 传递的 caller 数据决定模块转换方式。

{
"presets": [
["@babel/env", {
"targets": ["defaults"],
- "modules": false,
}]
}

若为 modules 选项指定了其他值,则 export * as ns 将始终被转换。


若您曾直接使用以下任一

  • @babel/plugin-proposal-export-namespace-from

  • @babel/plugin-proposal-logical-assignment-operators

  • @babel/plugin-proposal-numeric-separators

您可从配置中移除这些插件(它们已被默认包含):

{
"presets": [
["@babel/env", { "targets": ["defaults"] }]
],
"plugins": [
- "@babel/plugin-proposal-export-namespace-from",
- "@babel/plugin-proposal-logical-assignment-operators",
- "@babel/plugin-proposal-numeric-separators"
]
}

TypeScript 4.0 支持 (#11760)

TypeScript 4.0 引入了多项新特性

可变元组类型(Variadic Tuple Types)

现在可在元组类型中指定泛型展开操作符,且展开位置不受限制:

type Arr = readonly any[];

function collect<L extends Arr, M extends Arr>(b: boolean, l: L, m: M): [boolean, ...L, ...M] {
return [b, ...l, ...m];
}

带标签的元组元素(Labeled Tuple Elements)

元组元素现可添加标签:

type Log = [failed: boolean, reason?: Error, ...stacks?: string[]]
// same as
type Log = [boolean, Error?, string[]?];

catch 子句绑定的 unknown 类型

可为 catch 子句变量指定 unknown 类型:

try {
// ...
} catch (e: unknown) {
// type error! Error() only accepts string | undefined
throw new Error(e);

if (typeof e === "string") {
// e is a string
throw new Error(e);
}
}

注意:当前仅允许在 catch 绑定类型注释中使用 unknownany@babel/parser 不会强制执行此检查,因为类型别名(type ANY = any)和交叉类型(any | unknown)在编译时不会被解析。

从 Babel 7.11 开始,无需修改配置即可使用这些新特性。更多信息请参阅 TypeScript 4.0 公告

十进制字面量语法支持 (#11640)

十进制字面量提案(Stage-1)提供了类似于 BigInt 和整数的十进制数值表示法。

JavaScript
0.1m + 0.2m === 0.3m; // true

Babel 现已支持解析此类字面量:您可在配置中添加 @babel/plugin-syntax-decimal 插件,或在使用 @babel/parser 时启用 decimal 插件。注意:Babel 不提供十进制数的 polyfill 实现。

配置打印功能 (#11588)

Babel 支持多种配置方式(编程式配置及 JSON/JavaScript 配置文件)。这种灵活性也带来了复杂性:您可能难以确定项目中哪些配置文件生效以及 Babel 如何合并这些配置。特别是当您间接使用 Babel 且配置由 node_modules 中的包生成时。这些场景都需要输出配置信息以辅助调试编译问题。

Babel 7.11 为此提供了环境变量:

Shell
# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start
$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

将打印应用于 src/myComponent.jsx 的最终有效配置。

详见配置文档中的用法说明和输出示例。

@babel/eslint-parser (#10709)

babel-eslint 已迁移至 Babel 单体仓库并更名为 @babel/eslint-parser。它提供了 Babel 与 ESLint 的深度集成,并完整支持 ES2020 特性。Kai 在 babel-eslint 现状 博文中详细介绍了 @babel/eslint-parser 的发展规划。