[译]babel版本7.7.0功能更新

[译]babel版本7.7.0功能更新

2019年11月5日

今天我们将发布Babel 7.7.0!

此版本包括新的分析器功能,如顶级的await( await x(),第3阶段)和Flow enum声明(Flow的建议)。现在,@babel/parser可以选择从某些语法错误中恢复!

我们还增加了对TypeScript 3.7的支持:Babel可以解析和转换带有类型注释的私有类字段,使用declare关键字定义的公共类字段注释,类型声明函数签名和enum声明中的模板文字。

babel现在接受了三个新的配置文件:babel.config.json,babel.config.cjs和.babelrc.cjs,它们的行为和babel.config.js和.babelrc.js文件一样。

最后,Babel 7.7.0使用的内存比7.6.0少20%。

可以在GitHub上阅读整个变更日志。


顶级await proposal允许您在模块中await promise,就像它们被包装在一个大型异步函数中一样。例如,这对于有条件地加载依赖项或执行应用程序初始化很有用:

// Dynamic dependency path
const strings = await import(`./i18n/${navigator.language}.mjs`);

// Resource initialization
const connection = await dbConnector();

@babel/parser自版本7.0.0起,已支持await通过该allowAwaitOutsideFunction选项使用异步功能之外的功能。

版本7.7.0引入了一个新的topLevelAwait解析器插件,该插件有一些主要区别:

  • 根据await提案的要求,它仅允许顶层内部模块,而不允许内部脚本。这是必需的,因为基于同步脚本的模块系统(例如CommonJS)无法支持异步依赖关系。
  • 使用它可以检测正确的sourceType时间sourceType: "unambiguous"。请注意,由于await在脚本中是有效的标识符,因此许多看起来似乎毫不含糊的构造实际上是模棱两可的,Babel会将它们解析为脚本。例如,await -1可以是一个waiting表达式的waiting -1,或者是await和之间的差异1

如果@babel/parser直接使用,则可以启用topLevelAwait插件:

parser.parse(inputCode, {
  plugins: ["topLevelAwait"]
});

我们还创建了@babel/plugin-syntax-top-level-await软件包,您可以将其添加到Babel配置中:

// babel.config.js

module.exports = {
  plugins: [
    "@babel/plugin-syntax-top-level-await"
  ]
}

请注意,顶层使用await假定为模块捆绑程序中的支持。Babel本身并没有进行转换:如果您使用汇总,则可以启用该experimentalTopLevelAwait选项,而webpack 5支持该experiments.topLevelAwait选项。

从此版本开始,如果支持,它将自动启用@babel/preset-env。

像许多其他JavaScript解析器一样,@babel/parser每当遇到某些无效语法时,都会引发错误。这种行为对于Babel来说效果很好,因为要将JavaScript程序转换为另一个程序,我们必须首先确保输入有效。

鉴于Babel的流行,还有许多其他工具依赖@babel/parser:首先是babel-eslint 和 Prettier。对于这两种工具,在出现第一个错误时无法使用时都不理想。

考虑以下代码,由于重复proto属性,该代码无效:

let a = {
  __proto__: x,
  __proto__: y
}

let a = 2;

ESLint和Prettier当前的工作流程如下:

  1. Prettier无法格式化文件
  2. ESLint报告Redefinition of __proto__ property解析器错误
  3. 您删除第二个__proto__属性
  4. Prettier无法格式化文件
  5. ESLint报告Identifier 'a' has already been declared错误
  6. 您删除第二个let关键字
  7. Prettier 格式化文件格式

如果它更像这样会更好吗?

  1. Prettier格式化文件格式
  2. ESLint报告两个错误:Redefinition of __proto__ propertyIdentifier 'a' has already been declared
  3. 您删除第二个__proto__属性和第二个let关键字

在这个版本中,我们添加一个新的选项@babel/parser:errorRecovery。设置为true时,生成的AST将具有一个errors属性,其中包含所有@babel/parser能够从以下其中恢复的错误:

const input = `
let a = {
  __proto__: x,
  __proto__: y
}

let a = 2;
`;

parser.parse(input); // Throws "Redefinition of __proto__ property"

const ast = parser.parse(input, { errorRecovery: true });
ast.errors == [
  SyntaxError: "Redefinition of __proto__ property",
  SyntaxError: "Identifier 'a' has already been declared",
];

@babel/parser仍然可以抛出,因为并非每个错误当前都可以恢复。我们将继续改善这些情况!

Babel 6仅支持一个配置文件:.babelrc,其内容必须使用JSON指定。

Babel 7更改了.babelrcs 的含义,并引入了两个新的配置文件:babel.config.js和.babelrc.js(您可以在docs中了解它们之间的区别)。我们使用JavaScript添加了配置文件,以允许在启用/禁用插件/选项时定义自己的逻辑。

但是,JSON文件的一大好处是更易于缓存。两次调用时,同一个JavaScript文件可以产生不同的值,而JSON文件可以保证始终对同一对象求值。此外,JSON配置易于序列化,而无法使用隐式数据或关系序列化JavaScript值(如函数或JavaScript对象)。

请注意,Babel在使用基于JavaScript的配置时也会缓存转换,但是必须评估config文件(以便知道缓存是否仍然有效),并手动配置缓存。

由于这些原因,Babel 7.7.0引入了对新配置文件的支持:babel.config.json,其行为与相同babel.config.js。

我们还添加了对两个不同配置文件的支持:babel.config.cjs和.babelrc.cjs,在中使用node的"type": "module"选项时必须使用package.json(因为Babel在配置文件中不支持ECMAScript模块)。除了这种"type": "module"差异之外,它们的行为与babel.config.js和完全相同.babelrc.js。

TypeScript 3.7 RC支持可选的链接,无效的合并运算符,断言函数,类型字段声明以及许多其他与类型相关的功能。

自7.0.0起,通过和都支持Babel中的可选链(a?.b)和无效合并(a ?? b)。@babel/plugin-proposal-optional-chaining和@babel/plugin-proposal-nullish-coalescing-operator

在Babel 7.7.0中,您现在可以在断言函数和declare类字段中使用:

function assertString(x): assert x is string {
  if (typeof x !== "string") throw new Error("It must be a string!");
}

class Developer extends Person {
  declare usingBabel: boolean;
}

为了避免重大更改,我们推出了支持declare在一个标志背后类字段:"allowDeclareFields",双方支持@babel/plugin-transform-typescript和@babel/preset-typescript。这可能会成为默认行为,因此建议您迁移配置以使用它:

{
  "presets": [
    ["@babel/preset-typescript", {
      "allowDeclareFields": true
    }]
  ]
}

使用对象在已编译的JSX中传播(#10572

在JSX元素中使用传播属性时,Babel默认情况下会注入运行时帮助程序:

<a x {...y} />

// 

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

React.createElement("a", _extends({
  x: true
}, y));

2016年,随着对本地ES6的支持得到改善,我们添加了一个useBuiltIns选项,@babel/plugin-transform-react-jsx该选项允许编译后的输出直接使用Object.assign并删除多余的代码:

<a x {...y} />

// 

React.createElement("a", Object.assign({
  x: true
}, y));

但是,鉴于对对象传播的本地支持,它使我们能够生成更多优化的代码:

<a x {...y} />

//
React.createElement("a", { x: true, ...y });

您可以使用或启用该useSpread选项:@babel/preset-react@babel/plugin-transform-react-jsx

{
  presets: [
    ["@babel/react", { useSpread: true }]
  ]
}

从一开始,我们就一直在努力(#433#3475#7028等)来提高性能。Babel 7.7.0现在使用的内存减少了20%,与7.6.0相比,转换大型文件的速度提高了8%。

为了获得这些结果,我们优化了在生存期NodePath对象(用于包装每个AST节点)中完成的不同操作:

  1. 现在我们避免初始化一些很少使用的对象属性,直到需要它们为止,这使我们避免Object.create(null)为几乎每个AST节点分配资源。
  2. 通过用bookkeeping替换一些不常见的属性,从而@babel/traverse可以跳过更新它们,我们减少了每次访问单个节点的工作量。
  3. 我们通过将表示节点遍历(即,跳过,停止或删除)的状态的几个布尔属性压缩到位数组中来优化内存使用。

所有这些改进加起来在转换性能和内存使用方面存在以下差异:

您也可以检出上面图表的原始数据。如果您想了解更多有关此主题的信息,则可以阅读Jùnliàng关于他为获得这些改进所做的更改的详细文章

原文链接:segmentfault.com

上一篇:redirect
下一篇:iview 三级联动 Cascader,出现第一次load-data时候,value值不立即生效

相关推荐

官方社区

扫码加入 JavaScript 社区