写点什么

为什么说 Babel 将推动 JavaScript 的发展

  • 2015-05-26
  • 本文字数:1529 字

    阅读完需:约 5 分钟

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 应用和发展的主要动力。


感谢郭蕾对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群InfoQ 好读者)。

2015-05-26 09:2114652
用户头像

发布了 1008 篇内容, 共 419.4 次阅读, 收获喜欢 346 次。

关注

评论

发布
暂无评论
发现更多内容

神经网络与点

Nydia

Linux常用命令

在即

9月日更

数据安全

奔向架构师

数据仓库 数据安全 9月日更

架构师训练营 2 期模块三作业

kazeMace

架构实战营

这些 JS 中强大的操作符,总有几个你没听说过

前端下午茶

JavaScript 代码设计 代码技巧 基础知识

Prometheus 2.23.0 新特性

耳东@Erdong

Prometheus 9月日更

PHPStorm 的使用技巧汇总

baiyutang

9月日更

前沿·探索·想象力,今年的云栖大会有啥不一样?

阿里巴巴云原生

阿里巴巴 云原生

项目管理实践篇(二):技术型PM炼成记

后台技术汇

项目管理 管理 引航计划 内容合集 管理领域

SpringBoot整合Redis,怎么实现发布-订阅?,一个回答引发热烈讨论

Java 程序员 后端

测试常用英语(持续更新中)

IT蜗壳-Tango

9月日更

支付宝的沙箱环境配置和使用

Brave

支付宝 支付 9月日更

MySQL 从入门到实践,万字详解!

前端下午茶

MySQL 数据库 大前端

SpringBoot之配置文件,Java开发教程入门

Java 程序员 后端

JavaScript中 6 个reduce()实例

devpoint

reduce 9月日更

谈 C++17 里的 Observer 模式 - 3

hedzr

c++ 算法 设计模式 观察者模式 Design Patterns

纯CSS实现『斑马纹理投影文字』

德育处主任

CSS css3 大前端 纯CSS

SpringBoot-自动配置-源码解析,做了5年Java

Java 程序员 后端

SpringBoot2---指标监控,Java架构师之路

Java 程序员 后端

Coffee学架构 004 外包学生管理系统的完整架构设计

咖啡

架构设计

架构实战营 - 模块八作业

思梦乐

20. 从工业革命到文艺复兴

Databri_AI

人工智能

【LeetCode】最长递增子序列Java题解

Albert

算法 LeetCode 9月日更

设计消息队列存储消息数据的MySQL 表格

feitian

吴恩达Andrew Ng CNN卷积神经网络 论文等资料汇总 YOLOv5 新版本—改进与评估 易筋 ARTS 打卡 Week 65

John(易筋)

ARTS 打卡计划

架构实战营模块三

WolvesLeader

「架构实战营」

HarmonyOS 鸿蒙登录页搭建及 Text 文本详解

阿策小和尚

HarmonyOS Android 小菜鸟 引航计划 9月日更

高峰应对记录

编号94530

Spring Boot 2 性能压测 测试发开 高峰应对

☕️【Java专题系列】「回顾 RateLimiter」针对于限流器的入门到精通(针对于源码分析介绍)

码界西柚

ratelimiter Guava 9月日更 限流器

云随想三 2B软件的机遇与挑战?

FLASH

云时代 2B软件

学生管理系统架构设计文档

紫云

为什么说Babel将推动JavaScript的发展_JavaScript_谢丽_InfoQ精选文章