跳至主内容

7.15.0 版本发布：支持 Hack 风格管道操作符、TypeScript 常量枚举及 Rhino 编译目标

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

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

本次更新默认启用了顶级 await 解析（已在 五月会议 进入 Stage 4 阶段）和私有字段人体工学检查转换（已在 七月会议 进入 Stage 4 阶段）。同时新增对 Hack 风格 管道操作符的支持。我们还增强了 TypeScript 支持，实现了 const 枚举和命名空间别名的转换功能，并扩展了启发式规则，为 React.createContext() 创建的组件自动添加 .displayName 属性 (#13501)。

我们还引入了新的编译器假设 noIncompleteNsImportDetection，可在将 ECMAScript 模块编译为 CommonJS 时生成更精简的代码，同时无需担心模块循环导致的命名空间导入部分初始化问题。

此外，您现在可以将 Rhino 指定为编译目标。

您可以在 GitHub 查阅完整更新日志。

衷心感谢社区自五月 资助公告 更新以来给予的大力支持。如有赞助意向，欢迎通过 team@babeljs.io 联系我们！

重点更新​

默认启用的 ECMAScript 功能​

在最近两次会议中，顶级 await 和 私有字段人体工学检查 提案已进入 Stage 4 阶段。

JavaScript
import * as db from "database";

await db.connect(); // top-level await

class DBConnector {
  #password;
  static isConnector(obj) {
    return #password in obj; // ergonomic brand checks
  }
}

Babel 现已默认支持这些特性，您可以从配置中移除以下插件：

  • @babel/plugin-syntax-top-level-await

  • @babel/plugin-syntax-private-property-in-object

  • @babel/plugin-proposal-private-property-in-object

请注意，当前 Babel 仅支持解析顶级 await，尚不支持转换该语法。

TypeScript 新特性 (#13324, #13528)​

TypeScript 4.4 未引入需要实现的新语法，仅包含一项细微限制：禁止为抽象类字段指定初始值。

abstract class C {
    abstract prop = 1; // now a SyntaxError!
}

不过我们新增了两项期待已久的 TypeScript 特性支持：const 枚举和命名空间别名 (import Alias = Namespace)。

此前使用 const 枚举时会触发错误提示，因其需要类型信息才能正确编译。社区解决方案包括 babel-plugin-const-enum 等插件。现在 Babel 在编译枚举时会忽略 const 修饰符，这与 TypeScript 使用 --isolatedModules 选项时的行为一致。

若需获得类似 TypeScript 默认输出的优化效果，可启用 @babel/plugin-tranform-typescript 或 @babel/preset-typescript 的 optimizeConstEnums 选项。

// Input
const enum Animals { Dog }
console.log(Animals.Dog);

// Output (default)
var Animals;
(function (Animals) {
  Animals[Animals["Dog"] = 0] = "Dog";
})(Animals || (Animals = {}));

console.log(Animals.Dog);

// Output with `optimizeConstEnums`
console.log(0);

Hack 风格管道运算符支持 (#13191, #13416)​

"Hack 风格管道" 是管道运算符提案的新变体，旨在取代"智能混合"方案。

Hack 风格管道要求必须使用"主题标记符"（如 #）来引用前一个管道步骤的值：

JavaScript
// Input
"World"
  |> `Hello, ${#}!`
  |> alert(#);

// output
var _ref, _ref2;

_ref2 = (_ref = "World", `Hello, ${_ref}!`), alert(_ref2);

您可以通过在 @babel/plugin-proposal-pipeline-operator 中启用 proposal: "hack" 选项来测试此提案。同时必须在 "#" 和 "%" 之间选择要使用的主题标记符：

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", {
      "proposal": "hack",
      "topicToken": "#"
    }]
  ]
}

为 Babel 8 准备 @babel/eslint-parser (#13398)​

过去几个月我们持续为 Babel 8 做准备。虽然尚未准备好发布 Babel 8 测试版，但已开始引入首批实验性变更。

我们计划将 Babel 从 CommonJS 完全迁移至 ECMAScript 模块，但这会带来一个问题：配置加载将更频繁地变为异步操作，而 @babel/eslint-parser 只能同步运行（因为 ESLint 仅支持同步解析器）。

@babel/eslint-parser 7.15.0 版新增了实验性入口点：@babel/eslint-parser/experimental-worker。该方案将 Babel 配置加载和解析任务移至独立工作线程，由主线程同步管理，同时仍支持异步配置加载。对于 Babel 7 的即时优势是：即使使用 @babel/eslint-parser，现在也能使用原生 ECMAScript 模块作为 Babel 配置文件。

欢迎在现有项目中测试此功能，并通过问题页面报告问题：

JavaScript
// .eslintrc.js
module.exports = {
  parser: "@babel/eslint-parser/experimental-worker"
};
信息

此入口点要求 Node.js >= 12.3.0