乐趣区

关于babel:译Babel-7120-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 前都将会失常工作,然而不再保护,所以咱们强烈建议迁徙到新的插件。

❤️ 爱心三连击

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

退出移动版