[译]babel版本7.7.0功能更新

2019-11-14 admin

[译]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关于他为获得这些改进所做的更改的详细文章

[转载]原文链接:https://segmentfault.com/a/1190000020999346

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79175.html

文章标题:[译]babel版本7.7.0功能更新

相关文章
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
javascript中文网开通评论功能
javascript中文网开通评论功能啦,欢迎大家留言评论 ...
2015-11-12
JS实现的验证身份证及获取地区功能示例
本文实例讲述了JS实现的验证身份证及获取地区功能。分享给大家供大家参考,具体如下: 这里的代码可以用来验证身份证号,并且根据身份证号来判断是哪个省份及性别 代码示例: &lt;head &gt; &lt;title&gt;&lt;&#x...
2017-03-08
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在&lt;ion-content&gt;标签里面加入标签&lt;ion-infinite-scroll ng-if=&quot;hasmore&quot; on-infinite=&quot;loadMore()&quot;...
2017-03-07
JavaScript获取本周周一,周末及获取任意时间的周一周末功能示例
本文实例讲述了JS获取本周周一,周末及获取任意时间的周一周末功能。分享给大家供大家参考,具体如下: 项目需要获取本周及任意一天的周一及周末 需格式化,示例代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F...
2017-03-17
使用vue-grid-layout完成桌面拖拽布局功能
最近在用写公司项目里的一个桌面布局功能 需要使用到vue-grid-layout 看了下网上的 基本上只有demo的使用,这个插件虽然挺不错但是缺陷也很大. 没有下边界,发生碰撞的时候块会无限的往下移动,开放的API个人感觉没什么用 htt...
2018-06-16
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
JavaScript通过字典进行字符串翻译转换的方法
本文实例讲述了JavaScript通过字典进行字符串翻译转换的方法。分享给大家供大家参考。具体分析如下: 这里实际上就是先设置一个对照的字典,然后通过翻译函数,从字典中找到相应的键值。需要在JavaScript 1.8以上版本使用 函数定义...
2017-03-21
回到顶部