Babel 7.12.0 released，快来瞧瞧有哪些亮点

前言

本文系 Babel 官方 Blog 翻译，原文地址：babeljs.io/blog/2020/1…

正文开始

2020 年 10 月 15 日

我们刚刚发布了 Babel 的新的次要版本！

这次发布包括对新的 TypeScript 4.1 beta features：template literal types 和 key remapping in mapped types。

另外，我们实现了两个新的 ECMAScript 提案：class static blocks 和 imports and exports with string names

过去，我们将 @babel/plugin-sytax-module-attributes（以及相应地解析器插件 moduleAttributes）重命名为 @babel/plugin-syntax-import-assertions（和 importAssertions），为了匹配近期的提案更新。旧的插件可以在 Babel 8 之前运行，但是现在已弃用。

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

最重要的部分

TypeScript 4.1（#12129，#12131）

TypeScript 4.1 beta 宣布于几星期前，它包括了新功能的类型。

「Template Iiteral types」 允许使用模板字面量语法在类型级别上连接字符串：

type Events = "Click" | "Focus";

type Handler = {
  [K in `on${Events}`]: Function
};

const handler: Handler = {
    onClick() {}, // Ok
    onFocus() {}, // Ok
    onHover() {}, // Error!
};

和 key remapping in mapped types 一起，他们可以用于标识复制的对象转化：

type Getters<T> = {
    [K in keyof T as `get${Capitalize<K>}`]: () => T[K]
};

interface Dog { name: string; age: number; }

const lazyDog: Getters<Dog> = /* ... */;
lazyDog.getName(); // string
lazyDog.age; // error!

你可以在发布公告中阅读有关 TypeScript 4.1 的更多信息，或查看有关这些功能将释放哪些功能的其他示例。但是，请记住 TypeScript 4.1 仍然处于实验阶段！

Class static blocks（#12079，#12143）

❝
Babel REPL 示例
❞

class C {
  static #x = 42;
  static y;
  static {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  }
}

在阶段 2（stage 2 proposal）的提案中，你可以在评估类定义时应用其他静态变量的初始化。它不是要替换静态字段，而是要启用之前无法完成的新用例。在上面的示例中，静态属性 y 使用 #x 初始化。如果doSomethingWith(this.＃x) 抛出异常，y 将由默认值 unknown 分配。

你可以在提案描述中阅读更多有关信息。

感谢 JunLiang，你可以通过安装 @babel/plugin-proposal-class-static block 插件并添加到你的 Babel config 中来测试这个提案。由于，你可能已经在使用其他类似功能插件，因此，请确保将其他插件放在它之前：

{
  "plugins": [
    "@babel/plugin-proposal-class-static-block",
    "@babel/plugin-proposal-class-properties"
  ]
}

Imports and exports with string names（#12091）

这是在上次 TC 39 会议期间达成的共识，通过这个 PR 来允许字符串作为导入和导出变量的名称。

// emojis.js
let happy = "wooo!";
export { happy as "😃" };

// main.js
import { "😃" as smile } from "./emojis.js";
console.log(smile); // wooo!

这将允许跨模块使用任何有效的 UTF-16 的名称，从而使得 JavaScript 与其他语言（例如 WebAssembly）完全兼容。

你可以通过在配置中添加 @babel/plugin-syntax-module-string-names 来解析支持这个功能：

// babel.config.json
{
  "presets:" ["@babel/preset-env"],
  "plugins": [
    "@babel/syntax-module-string-names"
  ]
}

这个语法一旦合到主要的 ECMAScript 规范中，就会默认启用该功能。

请注意，这无法将任意字符串转为 ES 2015 风格的导入和导出：仅在针对其他模块系统，例如 CommonJS。

Import assertions parsing（#12139）

module arrtibutes 提案已进行了重大更改，并且也重命名为 import assertions

我们已经实现了对该提案新版本的解析支持，可以使用 @babel/plugin-syntax-import-assertions 插件（或者，如果你直接使用 @babel/parser，则可以使用 importAsserttions ）启用该提案。

 {
   "plugins": [
-    ["@babel/syntax-module-attributes", { "version": "may-2020" }]
+    "@babel/syntax-import-assertions"
   ]
 }

其最重要的语法改变是 with 关键词会被 assert 替换，并且断言 assertions 现在会用大括号包裹起来：

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

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

你可以在提案 README中查看更多有关这些改变的信息。

❝
⚠️ @babel/plugin-syntax-module-attributes 直到我们发布 Babel 8.0.0 前都将会正常工作，但是不再维护，所以我们强烈建议迁移到新的插件。
❞