Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。Babel由来自澳大利亚的开发者Sebastian McKenzie创建。他的目标是使Babel可以处理ES6的所有新语法,并为它内置了React JSX扩展及Flow类型注解支持。

据codemix创始人Charles Pick介绍,Babel是所有ES6转换编译器中与ES6规范兼容度最高的,甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性,而且不会影响与老版本浏览器的兼容性。此外,它还支持许多不同的构建&测试系统,使开发者很容易将它集成到自己的工具链中。

Charles认为,Babel从根本上讲是一个平台,这是它与compile-to-JS语言CoffeeScript和TypeScript最大的不同。Babel的插件系统允许开发者自定义代码转换器并插入到编译过程。这些转换器会接收一棵抽象语法树,并在代码转换成可执行的JavaScript之前对其进行操作。codemix已经尝试开发了静态&运行时类型检查、闭包消除、JavaScript”健康宏(hygienic macros)”等插件。

Babel不仅跟踪ES6的进展情况,而且还是ES7或ES2016的试验场。比如,它已经支持async/await,使开发者更容易编写异步JavaScript代码,而且与使用回调或Promises相比,代码更简洁易懂。虽然主流浏览器可能还需要几年的时间才能支持这种异步JavaScript代码编写方式,但Babel使开发者现在就可以用上它。这得益于Babel与JavaScript技术委员会(TC39)保持着高度一致,能够在ECMAScript新特性标准化之前为开发者提供现实世界可用的实现。而同时,这也有利于JavaScript的进一步发展,因为其团队可以在ECMAScript规范最后定稿前就获得来自现实世界的反馈。

Babel还能提升JavaScript的执行速度。由于JavaScript文件加载和执行速度慢会严重影响用户体验,所以JIT没有时间在运行时执行所有技术上可行的优化。相比之下,Babel是在编译时运行,没有这么严格的时间限制。借助强大的作用域跟踪和类型推断功能及插件系统,开发者可以构建转换器来执行此类优化,比如上文提到的闭包消除可以将闭包转换成平常的函数。Babel本身也内置了一些优化,比如通过utility.deadCodeElimination转换器执行常量合并/常量传播。在接下来的几个月里,我们还有望看到如下插件:

  • 任意函数内联:将函数内联至调用点,实现性能最大化,避免多态和函数调用开销;
  • 函数复制:在JavaScript中,多态是导致代码执行慢的一个常见原因。因此,在函数无法内联的地方,应该生成一个函数副本,确保函数保持单态;
  • 循环内不变代码外提:将循环体内不变的代码移至循环体外;
  • 循环展开:如果循环次数N固定,则移除循环,将循环体复制N份。

codemix后续将发布多个执行此类优化的插件,感兴趣的读者可以联系他们或者关注其Twitter。关于JavaScript引擎可以做哪些不同的优化,可以查看这里。Babel插件并局限于性能提升,比如,还可以做下面这些事情:i18n/翻译转换器:翻译特定字符串并替换;

自定义日志系统:通过环境变量设置日志级别,控制日志粒度;

面向可选模板系统(如Mustache或Handlebars)的编译时转换器:将标签模板字符串直接转换成JavaScript代码;

 

文档生成器:利用Flow类型注解和类型推断生成文档。

上述插件,有一部分已经实现。总之,Charles认为,Babel是一款优秀的软件,必将成为每个Web开发者工具箱的一部分,而作为ECMAScript的试验场,它在不远的将来很可能会成为推动ES6和ESNext应用和发展的主要动力。

谢谢大家的持续关注,后面也将会为大家提供更多最新最热门的行业动态和技术内容。

欢迎有兴趣的朋友加入我们的技术讨论社区:乎声社区》》感谢支持哦~

本文转自HTML5中国

为什么说Babel将推动JavaScript的发展的更多相关文章

  1. 为什么说 Babel 将推动 JavaScript 的发展【转】

    Babel是一个转换编译器,它能将 ES6 转换成可以在浏览器中运行的代码.Babel 由来自澳大利亚的开发者Sebastian McKenzie创建.他的目标是使 Babel 可以处理 ES6 的所 ...

  2. Babel:下一代Javascript语法编译器

    定义 Babel是一个Javascript的编译器,通过它你可以将一些新版本的ECMAScript语法转换成低版本的语法.以便能够在低版本的浏览器或者其它环境平稳运行. 截至目前笔者写这篇文章的时候, ...

  3. 一分钟入门 Babel(下一代 JavaScript 语法的编译器)

    简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行.严格来说,babel 也可以转化为更低 ...

  4. [转载]Sublime Text 3 搭建 React.js 开发环境

    [转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

  5. Sublime Text 3 搭建 React.js 开发环境

    sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...

  6. sublime text3搭建react native

    Sublime Text 3 搭建React.js开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel-subl ...

  7. [译]使用Babel和Browserify创建你的ES6项目

    原文地址:Setting up an ES6 Project Using Babel and Browserify JavaScript的发展日新月异,ES6很快就要接管JS了.很多著名的框架像Ang ...

  8. 现在就可以使用的5个 ES6 特性

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  9. Babel:JavaScript编译器

    一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...

随机推荐

  1. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  2. Linux time命令

    说明:喜欢写小程序的人都特别注重自己程序的执行效率,那么在Linux上,就有一个time的命令,用于测量命令的运行时间,还可以测量内存.I/O等的使用情况. 一个程序在运行时使用的系统资源通常包括CP ...

  3. Bootstrap~表单Form

    回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

  4. Java线程:线程状态的转换

    Java线程:线程状态的转换   一.线程状态   线程的状态转换是线程控制的基础.线程状态总的可分为五大状态:分别是生.死.可运行.运行.等待/阻塞.用一个图来描述如下:   1.新状态:线程对象已 ...

  5. Atitit j2ee5 jee5 j2ee6 j2ee7 jee6 jee7 新特性

    Atitit j2ee5 jee5 j2ee6 j2ee7 jee6 jee7 新特性 Keyword Java ee5 ,Java ee6,Java ee7  j2ee5 jee5 j2ee6 j2 ...

  6. 基于 flow.ci 实现 PHP 项目自动化持续集成

    高效程序员的习惯之一--让开发流程自动化.Automating shapes smarter future. 这是一个关于如何快速实现 PHP 项目自动化持续集成的快速指导.无论你是否使用过持续集成, ...

  7. javascript_core_05之正则表达式

    1. 检索关键词: ①检索固定关键词的位置: var i=str.indexOf(“关键词”,fromi):在str中查找fromi位置后,下一个关键词的下标位置:省略fromi,从0开始: var ...

  8. KnockoutJS 3.X API 第四章 表单绑定(7) event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...

  9. Java 多态——与C++的比较

    学习了Java和C++之后,由于长期不使用C++,而java的基础知识掌握不牢,现在已经搞不清java多态了.现在先来谈谈java多态,稍后有时间再更新C++的多态,并进行比较~ 一. Java的多态 ...

  10. CCNA网络工程师学习进程(4)网络设备的基本配置和详细介绍

        网络设备(路由器.交换机和防火墙等)与计算机一样需要操作系统.网络设备采用专用的操作系统,统称为IOS(Internetwork Operating System,网络操作系统).     ( ...