7.15.0 发布:支持 Hack-style 管道, TypeScript 枚举常量和 Rhino 目标
此版本默认支持解析顶级 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 阶段。
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
,无法对其进行转换。
#13324, #13528)
TypeScript 的新功能 (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);
#13191, #13416)
支持 Hack-style 管道操作符("Hack-style 管道" 是 管道操作符 提案的新风格,旨在取代“智能混合”变体。
Hack-style 管道要求你 始终 使用“主题标记”(如 #
)来引用上一个管道步骤的值:
// 输入
"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/eslint-parser
(#13398)
为 Babel 8 准备 在过去的几个月里,我们一直在缓慢地持续为 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:
// .eslintrc.js
module.exports = {
parser: "@babel/eslint-parser/experimental-worker"
};
ℹ️ 此入口点需要 Node.js >= 12.3.0