「譯」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 前都將會正常工做，可是再也不維護，因此咱們強烈建議遷移到新的插件。

❤️ 愛心三連擊

經過閱讀，若是你以爲有收穫的話，能夠愛心三連擊！！！