Skip to main content

7.15.0 发布：支持 Hack-style 管道, TypeScript 枚举常量和 Rhino 目标

· 6 min read

此版本默认支持解析顶级 await（第 4 阶段的 五月 会议）以及转换对私有字段的更人性化的 brand checks（第 4 阶段的 七月 会议）。现在还支持 Hack-style 管道操作符。我们也改进了对 TypeScript 的支持，实现了对 const 枚举和命名空间别名的转换支持，并且我们扩展了通过 React.createContext() 创建的 React 组件添加 .displayName 的启发式方法（#13501）。

我们还引入了一个新的编译器假设，noIncompleteNsImportDetection，在将 ECMAScript 模块编译到 CommonJS 时产生更小的输出，而不必担心模块周期导致的部分初始化的命名空间导入。

此外，你现在可以指定 Rhino 作为编译器目标。

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

我们真的很感激从 5 月份更新 提供资金的帖子 之后，社区在过去几个月里所给予的所有支持。如果你想讨论赞助事宜，请联系 team@babeljs.io！

亮点​

默认启用的 ECMAScript 功能​

在最近两次会议中，顶级 await 和 对私有字段的更人性化的 brand checks 提案已经进入第 4 阶段。

JavaScript
import * as db from "database";

await db.connect(); // 顶级 await

class DBConnector {
  #password;
  static isConnector(obj) {
    return #password in obj; // 更人性化的 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; // 现在是一个 SyntaxError!
}

不过，我们添加了两个长期缺失的 TypeScript 功能：const 枚举和名称空间别名（import Alias = Namespace）。

以前我们在使用 const 枚举时会提示一个错误，因为它需要类型信息才能正确编译。社区构建了一些插件作为变通方法，如 babel-plugin-const-enum。Babel 现在编译枚举时会忽略 const 修饰符，该修饰符与使用 --isolatedModules 选项时的 TypeScript 行为相匹配。

如果你希望得到类似于 TypeScript 生成的默认代码的更优化的输出，你可以启用 @babel/plugin-tranform-typescript 或 @babel/preset-typescript 的 optimizeConstEnums 选项。

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

// 输出（默认）
var Animals;
(function(Animals) {
  Animals[Animals["Dog"] = 0] = "Dog";
})(Animals || (Animals = {}));

console.log(Animals.Dog);

// 使用 `optimizeConstEnums` 的输出
console.log(0);

支持 Hack-style 管道操作符(#13191, #13416)​

"Hack-style 管道" 是 管道操作符 提案的新风格，旨在取代“智能混合”变体。

Hack-style 管道要求你 始终 使用“主题标记”（如 #）来引用上一个管道步骤的值：

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

// 输出
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 配置加载和解析任务转移到独立的 worker，该 worker 与主线程同步管理，同时仍然支持异步配置加载。作为 Babel 7 的一个直接优势，它允许对 Babel 配置文件使用本地 ECMAScript 模块，即使在使用 @babel/eslint-parser 时也是如此。

你现在就可以帮助我们在你现有的项目中测试它，并 在我们的 issues 页面 上报告任何 bug：

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

This entry-point requires Node.js >= 12.3.0