为什么说Babel将推动JavaScript的发展
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的发展的更多相关文章
- 为什么说 Babel 将推动 JavaScript 的发展【转】
Babel是一个转换编译器,它能将 ES6 转换成可以在浏览器中运行的代码.Babel 由来自澳大利亚的开发者Sebastian McKenzie创建.他的目标是使 Babel 可以处理 ES6 的所 ...
- Babel:下一代Javascript语法编译器
定义 Babel是一个Javascript的编译器,通过它你可以将一些新版本的ECMAScript语法转换成低版本的语法.以便能够在低版本的浏览器或者其它环境平稳运行. 截至目前笔者写这篇文章的时候, ...
- 一分钟入门 Babel(下一代 JavaScript 语法的编译器)
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行.严格来说,babel 也可以转化为更低 ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
[转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
- Sublime Text 3 搭建 React.js 开发环境
sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...
- sublime text3搭建react native
Sublime Text 3 搭建React.js开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel-subl ...
- [译]使用Babel和Browserify创建你的ES6项目
原文地址:Setting up an ES6 Project Using Babel and Browserify JavaScript的发展日新月异,ES6很快就要接管JS了.很多著名的框架像Ang ...
- 现在就可以使用的5个 ES6 特性
小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...
- Babel:JavaScript编译器
一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...
随机推荐
- C#实现的等额本息法、按月付息到期还本法、一次性还本付息法
你若懂行,那便有用,如下: void Main(){ var x = DengEBenXi.Compute(11111, 12, 3); x.Dump(); var y = AnYu ...
- 了解了这些才能开始发挥jQuery的威力
由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择 ...
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- HTML+CSS学习笔记
1,html里的实际有6个<hn>标记,从<h1>到<h6>,字体由大到小. 2,em标签表示斜体. 3,<p>标签是换一个段落,<br>标 ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- DDD~基础设施层~续
回到目录 在之前写的DDD~基础设施层文章中,提到了UnitOfWork,它里面有一些方法,但经过项目证明,不应该有Save和IsExplicitSubmit,而这个工作单元只起到了数据上下文统一的作 ...
- Oracle Redo 以及 Archived日志简述
Oracle通过Redo Archived实现数据的归档 什么是Redo日志 Redo日志记录了数据的变更,用于在数据库出现故障后,进行数据恢复. 功能主要由三个组件实现:Redo Log Buffe ...
- H5常用代码:适配方案3
在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有 ...
- Atitit.软件中见算法 程序设计五大种类算法
Atitit.软件中见算法 程序设计五大种类算法 1. 算法的定义1 2. 算法的复杂度1 2.1. Algo cate2 3. 分治法2 4. 动态规划法2 5. 贪心算法3 6. 回溯法3 7. ...
- 安装指定版本的cordova
安装指定版本的cordova 刚接触cordova看到教程肯定是直接 npm install -g cordova 然后下载个集成的adt 以为万事大吉,开始hello world 玩玩没有想到最新的 ...