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

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

Charles 认为,Babel 从根本上讲是一个平台,这是它与 compile-to-JS 语言CoffeeScriptTypeScript最大的不同。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 应用和发展的主要动力。

转自:https://www.infoq.cn/article/2015%2F05%2FES6-TypeScript

为什么说 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. CentOS7 安装 Mysql5.6.40

    CentOS7.5二进制安装MySQL-5.6.40 安装之后登陆不上,mysql.user 表是空的时: Mysql User表为空 mysql创建用户报错ERROR 1364 (HY000): F ...

  2. VB.NET Event RaiseEvent用处

    一.代码 Private Sub Form1_Load(ByVal sender As Object, _                       ByVal e As System.EventA ...

  3. 手写与copy

    m_Font.CreateFont( 14, // 字体高度 0 , // 宽度由系统确定 0 , // 文本不倾斜 0 , // 字体不倾斜 FW_NORMAL, // 字体粗度 0 , // 非斜 ...

  4. bzoj4383 [POI2015]Pustynia 拓扑排序+差分约束+线段树优化建图

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4383 题解 暴力的做法显然是把所有的条件拆分以后暴力建一条有向边表示小于关系. 因为不存在零环 ...

  5. 《SaltStack技术入门与实践》—— Job管理

    Job管理 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 在SaltStack里面执行任何一个操作都会在Master上产生一个jid号.Minion ...

  6. layui js动态添加的面板不能折叠

    layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...

  7. HTML中表格table标签的实例

    一.表格有边框,第一行居中对齐 二.表格没有边框 三.表格有水平标题 四.表格有垂直标题 五.合并行单元格 colspan合并单元格 六.表格有单元格边距(内边距) 七.表格没有单元格间距 八.表格有 ...

  8. PHP高手干货分享:不能不看的50个细节!【PHP培训教程】

    兄弟连分享PHP高手干货:不能不看的50个细节 1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以 ...

  9. POJ 2385 Apple Catching ( 经典DP )

    题意 : 有两颗苹果树,在 1~T 的时间内会有两颗中的其中一颗落下一颗苹果,一头奶牛想要获取最多的苹果,但是它能够在树间转移的次数为 W 且奶牛一开始是在第一颗树下,请编程算出最多的奶牛获得的苹果数 ...

  10. c++复习——类(2)

    1.this指针 this指针是一个指向对象的指针.  this指针是一个隐含于成员函数中的对象指针.  this指针是一个指向正在调用成员函数的对象的指针.  类的静态成员函数没有this指针 ...