7.11.0 版本发布:preset-env 支持 ECMAScript 2021、TypeScript 4.0 支持、配置打印及 `babel-eslint` 的未来
本页面由 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 功能。
逻辑赋值
逻辑赋值提供了一种结合逻辑运算符与赋值表达式的简写语法:
this.disabled ??= false;
this.disabled ?? (this.disabled = false);
clicked &&= !isDoubleClicked();
clicked = clicked && !isDoubleClicked();
hasDups ||= (prev === cur);
if (!hasDup) hasDups = (prev === cur);
数字分隔符
数字分隔符 (_) 是一种可在数字字面量中插入于数字之间的字符,用于提升视觉区分度:
1_000_000_000
0.000_000_000_1
命名空间重新导出 (#11849)
导入的模块可作为新的命名空间重新导出:
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 绑定类型注释中使用 unknown 和 any。@babel/parser 不会强制执行此检查,因为类型别名(type ANY = any)和交叉类型(any | unknown)在编译时不会被解析。
从 Babel 7.11 开始,无需修改配置即可使用这些新特性。更多信息请参阅 TypeScript 4.0 公告。
十进制字面量语法支持 (#11640)
十进制字面量提案(Stage-1)提供了类似于 BigInt 和整数的十进制数值表示法。
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 为此提供了环境变量:
# *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 的发展规划。