Babel 中文文档
  • 印记中文
  • 文档
  • 配置
  • 试用
  • 视频
  • 博客
  • 赞助
  • 团队
  • GitHub

›All Blog Posts

All Blog Posts

  • 7.18.0 Released: Destructuring private elements and TypeScript 4.7
  • 7.17.0 Released: RegExp 'v' mode and ... 🥁 decorators!
  • 7.16.0 发布: ESLint 8 和 TypeScript 4.5
  • 7.15.0 发布:支持 Hack-style 管道, TypeScript 枚举常量和 Rhino 目标
  • Babel is used by millions, so why are we running out of money?
  • 7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop
  • 7.13.0 Released: Records and Tuples, granular compiler assumptions, and top-level targets
  • 7.12.0 Released: TypeScript 4.1, strings as import/export names, and class static blocks
  • 7.11.0 Released: ECMAScript 2021 support in preset-env, TypeScript 4.0 support, printing config and the future of `babel-eslint`
  • The State of babel-eslint
  • 7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking
  • 7.9.0 Released: Smaller preset-env output, Typescript 3.8 support and a new JSX transform
  • 7.8.0 Released: ECMAScript 2020, .mjs configuration files and @babel/cli improvements
  • Babel's Funding Plans
  • 7.7.0 Released: Error recovery and TypeScript 3.7
  • 7.6.0 Released: Private static accessors and V8 intrinsic syntax
  • 7.5.0 Released: dynamic import and F# pipelines
  • The Babel Podcast
  • 7.4.0 Released: core-js 3, static private methods and partial application
  • 7.3.0 Released: Named capturing groups, private instance accessors and smart pipelines
  • 7.2.0 发布:私有实例方法(Private Instance Methods)
  • 在 Babel 中支持 TC39 标准的装饰器
  • 7.1.0 Released: Decorators, Private Static Fields
  • Babel 7 发布
  • Removing Babel's Stage Presets
  • What's Happening With the Pipeline (|>) Proposal?
  • Announcing Babel's New Partnership with trivago!
  • On Consuming (and Publishing) ES2015+ Packages
  • Nearing the 7.0 Release
  • Babel Turns Three
  • Planning for 7.0
  • Zero-config code transformation with babel-plugin-macros
  • Contributing to Babel: Three Lessons to Remember
  • Personal Experiences at Babel #1 — A PR with Unusually High Number of Reviews
  • Babel and Summer of Code 2017
  • Upgrade to Babel 7 (moved)
  • Upgrade to Babel 7 for Tool Authors (WIP)
  • 6.23.0 Released
  • The State of Babel
  • 6.19.0 Released
  • 6.18.0 Released
  • 6.16.0 Released
  • Babili (babel-minify)
  • 6.14.0 Released
  • Babel Doctor
  • Setting up Babel 6
  • 6.0.0 Released
  • React on ES6+
  • Function Bind Syntax
  • 5.0.0 Released
  • Babel 喜爱 React
  • 并非出生而逐渐走向灭亡
  • 2to3
  • 6to5 + esnext

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

July 26, 2021

Babel Team

此版本默认支持解析顶级 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,无法对其进行转换。

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 管道要求你 始终 使用“主题标记”(如 #)来引用上一个管道步骤的值:

// 输入
"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:

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

ℹ️ 此入口点需要 Node.js >= 12.3.0

Recent Posts
  • 亮点
    • 默认启用的 ECMAScript 功能
    • TypeScript 的新功能 (#13324, #13528)
    • 支持 Hack-style 管道操作符(#13191, #13416)
    • 为 Babel 8 准备 @babel/eslint-parser (#13398)
Babel 中文文档
文档
学习 ES2015
社区
视频用户Stack OverflowSlack 频道Twitter
更多
博客GitHub 组织GitHub 仓库Website 仓库旧版网址 6.x旧版网址 5.x