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

前言

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

正文开始

2020 年 10 月 15 日

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

这次发布包括对新的 TypeScript 4.1 beta features:template literal typeskey remapping in mapped types

另外,我们实现了两个新的 ECMAScript 提案:class static blocksimports 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 前都将会正常工作,但是不再维护,所以我们强烈建议迁移到新的插件。

原文链接:juejin.im

上一篇:如何在Javascript中使用Object.freeze()
下一篇:再也不会忘记“In/hasOwnProperty/for…in/for…of/forEach/map()”

相关推荐

官方社区

扫码加入 JavaScript 社区