乐趣区

关于babel:译Babel-7120-released快来瞧瞧有哪些亮点

jiezi

前言


本文系 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 前都将会失常工作，然而不再保护，所以咱们强烈建议迁徙到新的插件。

❤️ 爱心三连击

通过浏览，如果你感觉有播种的话，能够爱心三连击！！！

退出移动版