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

前言

本文系 Babel 官方 Blog 翻译，原文地址：https://babeljs.io/blog/2020/10/15/7.12.0

正文开始

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 前都将会正常工做，可是再也不维护，因此咱们强烈建议迁移到新的插件。

❤️ 爱心三连击

经过阅读，若是你以为有收获的话，能够爱心三连击！！！