跳至主内容

7.22.0 发布：支持显式资源管理及导入属性解析

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

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

Babel 7.22.0 正式发布，新增对显式资源管理提案的解析/转换支持（包含同步与异步两种变体），并支持解析导入属性（这是旧版导入断言提案的演进）。

我们还根据提案变更更新了装饰器的实现，并增加了对 TypeScript import ... = 和 export ... = 语句的支持。

@babel/preset-env 现已默认包含对正则表达式 v 标志的转换支持（该标志最近已被批准纳入 ECMAScript 标准）。最后，我们将所有针对稳定 ECMAScript 功能的插件名称从 -proposal- 改为 -transform-。

您可以在 GitHub 上阅读完整的更新日志。

如果您或您的公司希望支持 Babel 和 JavaScript 的发展，但不确定如何操作，您可以通过 Open Collective 向我们捐款，或者更好的是，直接与我们合作实现新的 ECMAScript 提案！作为志愿者驱动的项目，我们依赖社区支持来资助为广泛 JavaScript 用户提供帮助的工作。如需进一步讨论，请通过 team@babeljs.io 联系我们！

重点更新​

显式资源管理 (#15633, #15520)​

这个 Stage 3 阶段的显式资源管理提案允许定义包含资源的变量，这些资源将在退出声明作用域时被"释放"。这是通过 using（用于同步释放）和 await using（用于异步释放）声明实现的：

JavaScript
{
  using fileHandle = filesystem.open("./my/file.txt");

  write(fileHandle, "Hello!");
} // At the end of the block, fileHandle will be automatically closed.
JavaScript
{
  await using db = await Database.connect("//my-db.sql");
  db.query("INSERT INTO tools (name, version) VALUES ('Babel', '7.22.0')");
} // At the end of the block, the db connection will be closed asynchronously

您可以通过在 Babel 配置中添加 @babel/plugin-proposal-explicit-resource-management 来启用对该提案的支持：

babel.config.json
 {
   "plugins": [
     "@babel/plugin-proposal-explicit-resource-management"
   ]
 }

您也可以在 REPL 中尝试此提案。

导入属性 (#15536, #15620)​

"导入断言"提案的语法已改为使用 with 关键字替代 assert，提案名称也已更改为"导入属性"：

JavaScript
import json from "./foo.json" with { type: "json" };

import("./foo.json", { with: { type: "json" } });

我们已实现对这一新提案的解析支持，可通过启用 @babel/plugin-syntax-import-attributes 插件（若直接使用 @babel/parser，则启用 importAttributes 选项）来使用：

babel.config.json
 {
   "plugins": [
-    "@babel/syntax-import-assertions",
+    "@babel/syntax-import-attributes"
   ]
 }

您可在三月 TC39 会议的演示文稿中查看提案变更详情，并在一月 TC39 会议的演示文稿中了解相关动机。

注意

@babel/plugin-syntax-import-assertions 在 Babel 8.0.0 发布前仍可继续使用，但将不再维护，因此我们强烈建议迁移至新插件。

为简化从 with 到 assert 的迁移过程，若您仅在支持旧语法但尚未支持新语法的工具和运行时（如 Node.js 20 或 Rollup 3.21）中运行 Babel 编译后的代码，可使用 @babel/plugin-proposal-import-attributes-to-assertions 插件：

babel.config.json
 {
   "plugins": [
-    "@babel/syntax-import-assertions",
+    "@babel/plugin-proposal-import-attributes-to-assertions"
   ]
 }

🛑 请注意，此插件生成的已废弃代码将无法在仅支持提案当前描述的 with 语法的工具和运行时中运行。

装饰器更新 (#15570)​

TC39 委员会收到来自实现装饰器的 JavaScript 工具和引擎的进一步反馈，据此完善提案并制定了多项变更与错误修复。

与 Babel 用户相关的主要变更有：

  • accessor 静态字段现可在派生类中使用：

    JavaScript
    class Base {
      static accessor x = 2;
    }
    class Derived extends Base {}

    Derived.x; // Used to throw, now returns `2`

  • 存储在对象属性中的装饰器现在调用时以该对象作为 this（而非 undefined）：

    JavaScript
    let MyDecs = {
      dec() {
        console.log(this); // Now logs `MyDecs` instead of `undefined`
      }
    };

    @MyDecs.dec class {}

您可通过向装饰器插件传递 version: "2023-05" 选项来使用此新版本：

babel.config.json
 {
   "plugins": [
     ["@babel/plugin-proposal-decorators", {
       "version": "2023-05"
     }]
   ]
 }

您也可在 REPL 中试用新版本提案，只需启用 "Stage 3" 预设并选择合适的装饰器版本。

TypeScript import ... = 与 export = 语句​

当使用 TypeScript 的 verbatimModuleSyntax 选项时，CommonJS 文件中禁止使用 ESM 的 import/export 语句。开发者必须改用 import ... = 和 export = 语法：

TypeScript
import A = require("./a");

export = { x: 2 };

其会被脱糖（desugar）为：

JavaScript
const A = require("./a");

module.exports = { x: 2 };

这种语法仅在 ECMAScript 模块中受支持，并且仅在将它们编译为 CommonJS 时生效。除非您有自定义配置，否则这意味着：

  • 使用 @babel/preset-typescript 时，适用于 .cts 文件

  • 在以 ESM 方式编写并使用 @babel/plugin-transform-modules-commonjs 编译的 .ts 文件中

包重命名​

即日起，当插件在标准化流程中达到 Stage 4 成为稳定特性时，我们将把 -proposal- 插件重命名为 -transform-。以下包已完成重命名：

Old nameNew nameECMAScript version
@babel/plugin-proposal-unicode-sets-regex@babel/plugin-transform-unicode-sets-regexES2024
@babel/plugin-proposal-class-static-block@babel/plugin-transform-class-static-blockES2022
@babel/plugin-proposal-private-property-in-object@babel/plugin-transform-private-property-in-objectES2022
@babel/plugin-proposal-class-properties@babel/plugin-transform-class-propertiesES2022
@babel/plugin-proposal-private-methods@babel/plugin-transform-private-methods
@babel/plugin-proposal-numeric-separator@babel/plugin-transform-numeric-separatorES2021
@babel/plugin-proposal-logical-assignment-operators@babel/plugin-transform-logical-assignment-operatorsES2021
@babel/plugin-proposal-nullish-coalescing-operator@babel/plugin-transform-nullish-coalescing-operatorES2020
@babel/plugin-proposal-optional-chaining@babel/plugin-transform-optional-chainingES2020
@babel/plugin-proposal-export-namespace-from@babel/plugin-transform-export-namespace-fromES2020
@babel/plugin-proposal-json-strings@babel/plugin-transform-json-stringsES2019
@babel/plugin-proposal-optional-catch-binding@babel/plugin-transform-optional-catch-bindingES2019
@babel/plugin-proposal-async-generator-functions@babel/plugin-transform-async-generator-functionsES2018
@babel/plugin-proposal-object-rest-spread@babel/plugin-transform-object-rest-spreadES2018
@babel/plugin-proposal-unicode-property-regex@babel/plugin-transform-unicode-property-regexES2018

这些插件默认包含在 @babel/preset-env 中：若您正在使用该预设，则无需在配置中显式列出它们，因此此项变更不会影响您的工作。旧名称的包将不再更新。