ES6标准入门(第3版)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-09-05 01:46:08

点击下载

作者:阮一峰

出版社:电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

ES6标准入门(第3版)

ES6标准入门(第3版)试读:

内容简介

ES6是下一代JavaScript语言标准的统称,每年6月发布一次修订版,迄今为止已经发布了3个版本,分别是ES2015、ES2016、ES2017。本书根据ES2017标准,详尽介绍了所有新增的语法,对基本概念、设计目的和用法进行了清晰的讲解,给出了大量简单易懂的示例。本书为中级难度,适合那些已经对JavaScript 语言有一定了解的读者,可以作为学习这门语言最新进展的工具书,也可以作为参考手册供大家随时查阅新语法。

第3版增加了超过30%的内容,完全覆盖了ES2017标准,相比第2版介绍了更多的语法点,还调整了原有章节的文字表达,充实了示例,论述更准确,更易懂易学。

未经许可,不得以任何方式复制或抄袭本书之部分或全部内容。

版权所有,侵权必究。

图书在版编目(CIP)数据

ES6标准入门/阮一峰著.—3版.—北京:电子工业出版社,2017.9

ISBN 978-7-121-32475-8

Ⅰ.①E… Ⅱ.①阮… Ⅲ.①JAVA语言-程序设计 Ⅳ.①TP312.8

中国版本图书馆CIP数据核字(2017)第195379号

策划编辑:张春雨

责任编辑:徐津平

印刷:三河市鑫金马印装有限公司

装订:三河市鑫金马印装有限公司

出版发行:电子工业出版社

北京市海淀区万寿路173信箱 邮编 100036

开本:787×980 1/16 印张:36 字数:786千字

版次:2014年8月第1版

2017年9月第3版

印次:2017年9月第1次印刷

定价:99.00元

凡所购买电子工业出版社图书有缺损问题,请向购买书店调换。若书店售缺,请与本社发行部联系,联系及邮购电话:(010)88254888,88258888。

质量投诉请发邮件至zlts@phei.com.cn,盗版侵权举报请发邮件至dbqq@phei.com.cn。

本书咨询联系方式:010-51260888-819,faq@phei.com.cn推荐序1

为什么我们要关心标准“ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。”

本书第1章的这句话已经清楚地告诉我们,这是一本不实用的书。我们学习了这本书,并不意味着掌握了一项实用的技术,而只是掌握了一个未来可能会发布的技术标准。而标准,有可能在将来被实现,变成主流,也有可能就仅仅是一个标准,没有人真的去实践它。如果你再了解一下第 1 章里面介绍的 ECMAScript 4.0 草案的血泪史,或者回顾一下曾经红极一时的XHTML,就更容易明白这一点了。

那我们为什么不直接忽略标准,拥抱实践就好呢?来,我们一起翻开小学课本,跟我念:柏林已经来了命令,阿尔萨斯和洛林的学校只许教德语了……(《最后一课》)

当“统治者”宣布一门语言成为“标准”的时候,不管是在现实生活还是技术领域里面,往往就意味着所有其他的选项自动消失了,我们只能去学习“统治者”的语言。幸运的是,在技术领域里面,跳出来争取对技术的影响力和主导权,不但不违反任何一国的宪法,往往还是被鼓励的。

因此,技术的未来发展,是我们可以去发出声音,去影响,乃至于去引领的。而要做到这些,我们需要搞清楚,ECMA和各大互联网巨头们,他们正在做什么,正在把技术往哪里引领;他们引领的方向,到底是对所有人有利的,还是只是对某些公司有利;我们中国的开发者和中国的公司,要怎么加入到这些标准的制订过程中,把标准带到更好的方向上。

最近几年,越来越多的中国公司加入到各种国际标准组织中,参与到各种标准(尤其是在东亚文字处理、排版、输入法相关的领域)制订过程中,发出了中国技术人员的声音。随着中国国力的增强,中国开发厂商和技术人员的影响力的发展壮大,可以预见,不久的将来,中国工程师也许会深入参与到ECMAScript 7和HTML6这样的技术标准的制订过程里面,跟各国的专家一起探讨,我们中国的开发者不喜欢这样,更喜欢那样。在那些标准大会上,我们的发言权将来自于我们对标准的深入理解、我们对技术发展的独到眼光和我们建设起来的技术影响力。作为一个JS开发者,实话说,对于ECMAScript 6里面的很多内容(比如let语句),我并不完全认同。但是很遗憾,这个标准的制定过程没我们什么事。但是如果我们从现在开始关注国际标准,翻译标准文档,让更多人了解标准,更多公司加入标准组织、参与标准制订,也许未来的中国技术圈不但会是很多人的一个圈子,还会是很有影响力的一个圈子。“我们说的话,让世界都认真听话。”(S.H.E,《中国话》)

腾讯驻W3C顾问委员会代表,黄希彤(stone)

黄希彤(网名 emu),Web 性能优化(WPO)领域实践者,信息无障碍领域推动者。腾讯Web前端专家,腾讯驻W3C顾问委员会代表,腾讯QQ空间技术总监。推荐序2

因为一件往事,我现在轻易不敢给别人写序或者书评。那天我在想,如果我要给这本书写序,是不是应该先把这本书拿给贺老(hax)看看。后来呢,我到阮一峰老师的 GitHub上看了一看,发现这本书有7500多个star,若干个已解决和未解决的issue,所以我就放心了。开源真是好啊!

这本书是关于 ES6 的,我对 ES6 并没有特别系统的研究,但是也在工作中使用了一部分ES6的特性,使用得最多的是Promise,其他的特性只是研究,很少使用,主要是因为本身支持ES6的环境和工具有限。浏览器就不说了,现在的前端工程师在一些产品中能够抛弃IE6已经是很幸福的事情了,但是即使是IE8,离真正的ES6也还很遥远。在其他领域,比如手机游戏领域,cocos2d-js v3.0使用的脚本引擎是SpiderMonkey v28,因此情况要好很多,但是周边的一些工具,比如 closure copiler 不能很好地压缩和优化 ES6,当然你可以采用转换工具先将 ES6转成 ES5,然后再做压缩和优化,但是这多出来的一步造成更多出错的可能,而且和享受 ES6的语法糖的快乐相比,开销有点大——如果无论如何需要再转一步,那么为什么我们不干脆考虑TypeScript或者其他选择呢?

为什么会选择使用ES6的Promise呢?那是因为Promise算是比较好解决异步嵌套问题的方案,另外Promise本身在低版本下也有比较好的polyfill实现(https://github.com/jakearchibald/es6-promise),对于我和一些前端工程师来说,是十分乐意为将来去写一些能够向前兼容的符合标准的代码的。

目前这个阶段,前端学习ES6并不意味着能够很快将ES6的好处带到工作中,因为我们毕竟还受到现在的浏览器环境的制约。但是,即使单纯从学习一门编程语言的核心API的角度来说,ES6 也是值得学习的。它的很多新特性,真正涉及现代编程语言概念中很流行的部分,不管是解构赋值还是迭代器或者yield,都是超棒超赞的思想,不但易于理解,也能节省很多键盘操作,而另一些诸如const、作用域之类的设定,则让脚本引擎代替程序员人肉检查做更多的事情,让我们最终上线的代码变得更加安全和更加优美。

不管怎样,ES6代表着一种前端的未来,这种未来,无疑能让前端工程师们工作得更高效,也更有乐趣。更进一步说,ECMAScript还是开放的标准,对这门语言的新特性,有什么好的想法,都是有机会提交为标准的,也就是说,前端程序员的未来,是由我们前端程序员自己来创造的,还有什么是比自由更加美好的呢?所以,为了未来,加油!

360奇舞团团长,月影

吴亮(网名月影),先后在微软亚洲研究院做过访问学生,在金蝶软件有限公司担任过核心开发工程师、设计师和项目经理,在百度电子商务事业部担任Web开发项目经理。现任奇虎360高级技术经理,360前端团队奇舞团负责人。多年来致力于JavaScript技术和Web标准的推广,活跃于国内各技术社区,现为w3ctech顾问。推荐序3

同大多数读者一样,我最早看到阮一峰先生的文字是在其博客上。他的第一篇博文于2003年写就,迄今已有1500多篇文章,可谓高产。阮先生并非计算机相关专业,但这一点并没有妨碍他从事技术写作,其文字朴实,思路清晰,所有人都能看懂,更能感受到他写文章的用心程度,而这本书完美地体现了他的一贯风格。另外,这本书是开源作品,也很好地践行了他一贯的贡献原则。

自我写下第一行前端代码到现在已经十来年了,前端的基础设施也发生了巨大的变化。变化最大的还是浏览器环境,从原来烂熟IE6的各种bug和hack,到现在IE6已经完全不在我的考虑范围内。其次是前端的工程化程度,2011 年,我做 FIS(http://fis.baidu.com)时,完全没想到前端的工程化进展会如此之快。而变化最慢的,要数语言本身了,1999年发布的ECMAScript 3.0其实相当于第1版;10年后的2009年发布了第2版:ECMAScript 5.0;ECMAScript 6则是2015年发布的。

我的一贯主张是,要学好JavaScript,ECMAScript标准比什么书都强。ECMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性。理解语言的本质后,你已经从沙堆里挑出了珍珠,能经受得起时光的磨砺。

我从2009年开始正式接触ECMAScript规范,当时我在写百度的JavaScript基础库Tangram 1.0,ECMAScript 5还处于草案状态。我自己打印了一本小册子,上下班时在地铁上慢慢看。那时才知道,有很多问题在网络上被包装了太多次,解释得千奇百怪,但用规范的语言来描述竟是如此简单。

ECMAScript标准经历了很多变故——尤其是ECMAScript 4那次——也从语言的角度反映了各大厂商之间的立场差异。不过,ECMAScript 5的正式发布和发展,为所有Web开发者奠定了稳定的基础,尽管浏览器之间存在大量差异,尤其是DOM,但在JavaScript语言层面,都相对严格地遵循着ECMAScript 5的规范。

JavaScript遵守“一个JavaScript”的原则,所有版本都需要向后兼容。Web语言的解释器版本不是由开发者而是由用户决定的,所以JavaScript无法像Python、Ruby、Perl那样,发布一个不向下兼容的大版本,这也就是ECMAScript 4 失败的根源,由于它会导致大量已有网页的“bug”,浏览器厂商会强烈反对。当然,ECMAScript 6 的strict mode也在尝试逐步淘汰一些不良实践。

ECMAScript 6相比5有了很大的进步。经过这次改进,JavaScript语法更精简,变得更有表现力了;在严格模式下,开发者受到了适当而必要的约束;新增了几种数据类型(map、set)和函数能力(Generator、迭代器);进一步强化了JavaScript的特点(promise、proxy);并且让JavaScript能适用于更大型的程序开发(modules、class)。更重要的是,这个规范会被浏览器厂商、不同的平台广泛支持。

实际上,所有的语言改进都是从使用者的最佳实践中提炼出来的。JavaScript的约束一直很少,这一灵活性让开发者能相当自由地积累形形色色的使用经验和实践,也就是说,我们所有ECMAScript的使用者,也是其标准的间接贡献者。

百度高级工程师、前端通用组技术负责人,雷志兴

雷志兴(网名berg),资深工程师,2007年加入百度工作至今,负责过多项前端基础技术、架构的设计和搭建;骑行爱好者,行程万余公里;微信公众号“行云出岫”(DevLife)的维护者。第3版前言

4年前,当我开始写这本书的时候,ECMAScript 5.1版刚刚开始普及,最流行的框架还是jQuery。ES6看上去就像一个遥远的蓝图,无人知道何时会实现。

仅仅4年,ES6已经经历了ES2015、ES2016、ES2017这3个版本的迭代,各种实现的支持度已经超过90%,不仅可以实现网页的编写,还可以实现服务器脚本、手机App和桌面应用的编写。程序员们完全接受了这个标准,甚至大量使用尚未标准化的新语法。JavaScript语言就像一列高铁,以令人“眩晕”的速度向前冲刺。

互联网行业的蓬勃兴旺造就了ES6的成功,也使得这本教程不断更新,越写越厚。第2版问世18个月之后,不得不推出第3版。

第3版新增了超过30%的内容,完全覆盖了ES2017标准(第2版只做到覆盖 ES2015标准),并且对所有章节都进行了修订,文字表达更准确易懂,示例更丰富。对读者来说,这个版本更容易学习,更有参考价值。

这4年来,我对ES6的理解和所有的学习笔记,都浓缩在这本教程里面。那些我自己感到最困难的地方,书中都做出了详细讲解,给出了细致的示例,我相信这也是其他国内学习者所需要的。

这本教程当然也包含了些许局限,以及细致检查之后仍然疏漏的各种错误。一旦发现,我会第一时间更正。读者可以到官方仓库github.com/ruanyf/es6tutorial中查看勘误。

我在微博上曾经说过一段话,就把它放在这里作为结束吧。“我水平其实不高,只是好奇心重,从没想到这么多人会关注。希望不要让大家失望,未来做一块垫脚石,为需要的朋友提供帮助,为技术的推广和发展做出力所能及的贡献。”

阮一峰

2017年8月1日,写于杭州第1版前言

2012 年年底,我开始动手做一个开源项目《JavaScript 标准参考教程》(github.com/ruanyf/jstutorial)。原来的设想是将自己的学习笔记整理成一本书,哪里料到,这个项目不断膨胀,最后变成了ECMAScript 5及其外围API的全面解读和参考手册,写了一年多还没写完。

那个项目的最后一章就是ECMAScript 6的语法简介。那一章也是越写越长,最后我不得不决定,把它独立出来,作为一个新项目,也就是您现在看到的这本书。

JavaScript 已经是互联网开发的第一大语言,而且正在变成一种全领域的语言。著名程序员Jeff Atwood甚至提出了一条“Atwood定律”:“所有可以用JavaScript编写的程序,最终都会出现JavaScript的版本。”(Any application that can be written in JavaScript will eventually be written in JavaScript.)

ECMAScript 正是JavaScript 的国际标准,这就决定了该标准的重要性。而 ECMAScript 6是 ECMAScript 历史上最大的一次版本升级,在语言的各个方面都有极大的变化,即使是熟练的JavaScript程序员,也需要重新学习。由于ES6的设计目标是企业级开发和大型项目,所以可以预料,除了互联网开发者,将来还会有大量应用程序开发者(甚至操作系统开发者)成为ES6的学习者。

我写作这本书的目标,就是想为上面这些学习者提供一本篇幅较短、简明易懂、符合中文表达习惯的ES6教程。它由浅入深、循序渐进,既有重要概念的讲解,又有API接口的罗列,便于日后当作参考手册查阅,还提供大量示例代码,让读者不仅一看就懂,还能举一反三,直接复制用于实际项目之中。

需要声明的是,为了突出重点,本书只涉及ES6与ES5的不同之处,不对JavaScript已有的语法进行全面讲解,毕竟市面上这样的教程已经有很多了。因此,本书不是 JavaScript 入门教材,不适合初学者。阅读本书之前,需要对JavaScript的基本语法有所了解。

我本人也是一个ES6的学习者,不敢说自己有多高的水平,只是较早地接触了这个主题,持续地读了许多资料,追踪标准的进展,做了详细的笔记而已。虽然我尽了最大努力,并且原稿在 GitHub 上公开后已经得到了大量的勘误,但是本书的不尽如人意之处恐怕还有不少。

欢迎大家访问本书的项目主页(github.com/ruanyf/es6tutorial),提出意见,提交pull request。这些都会包括在本书的下一个版本中。

阮一峰

2014年6月4日,写于上海读者服务

轻松注册成为博文视点社区用户(www.broadview.com.cn),扫码直达本书页面。

· 提交勘误:您对书中内容的修改意见可在 提交勘误 处提交,若被采纳,将获赠博文视点社区积分(在您购买电子书时,积分可用来抵扣相应金额)。

· 交流互动:在页面下方 读者评论 处留下您的疑问或观点,与我们和其他读者一同学习交流。

页面入口:http://www.broadview.com.cn/32475第1章 ECMAScript 6简介

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已于2015年6月正式发布。它的目标是使JavaScript语言可以用于编写复杂的大型应用程序,成为企业级开发语言。1.1 ECMAScript和JavaScript的关系

一个常见的问题是,ECMAScript和JavaScript到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript的创造者——Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布了 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。

该标准从一开始就是针对JavaScript语言制定的,但是并没有称其为JavaScript,主要有以下两方面原因。一是商标,Java是Sun公司的注册商标,根据授权协议,只有Netscape公司可以合法地使用JavaScript这个名字,而且JavaScript本身也已被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript方言还有JScript和ActionScript)。在日常场合,这两个词是可以互换的。1.2 ES6与ECMAScript 2015的关系

ECMAScript 2015(简称 ES2015)这个词也是经常可以看到的。那么,它与ES6是什么关系呢?

2011年,ECMAScript 5.1版本发布后,6.0版本便开始制定了。因此,ES6这个词的原意就是指,JavaScript语言的下一个版本。

由于这个版本引入的语法功能太多,而且在制定过程当中还有很多组织和个人不断提交新功能。因此,不可能在同一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版本,过一段时间再发布6.1版本,然后是6.2版本、6.3版本等。

但是,标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。经过多次会议,如果一个提案足够成熟,便可以正式进入标准。也就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有所变动。

标准委员会最终决定,每年6月正式发布一次标准,作为当年的正式版本。接下来的时间就在这个版本的基础上进行改动,直到下一年的6月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。

ES6的第一个版本就这样在2015年6月发布了,正式名称是《ECMAScript 2015标准》(简称ES2015)。2016年6月,小幅修订的《ECMAScript 2016标准》(简称ES2016)如期发布,这个版本可以看作是ES6.1版,因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符),基本上可以认为是同一个标准。根据计划,2017年6月会发布ES2017标准。

因此,ES6既是一个历史名词,也是一个泛指,含义是5.1版本以后的JavaScript的下一代标准,涵盖了ES2015、ES2016、ES2017等,而ES2015则是正式名称,特指当年发布的正式版本的语言标准。本书中提到的 ES6,一般是指 ES2015 标准,但有时也是泛指“下一代JavaScript语言”。1.3 语法提案的批准流程

任何人都可以向标准委员会(又称TC39委员会)提案,要求修改语言标准。

一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都要由 TC39委员会批准。

· Stage 0:Strawman(展示阶段)

· Stage 1:Proposal(征求意见阶段)

· Stage 2:Draft(草案阶段)

· Stage 3:Candidate(候选阶段)

· Stage 4:Finished(定案阶段)

一个提案只要能进入 Stage 2,就基本认为其会包括在以后的正式标准里面。ECMAScript当前的所有提案都可以在TC39的官方网站Github.com/tc39/ecma262中查看。

本书的写作目标之一,是跟踪ECMAScript语言的最新进展,介绍5.1版本以后所有的新语法。对于那些明确或很有希望会被列入标准的新语法,本书都将予以介绍。1.4 ECMAScript的历史

ES6从开始制定到最后发布,整整用了15年。

前面提到,ECMAScript 1.0是1997年发布的,接下来的两年连续发布了ECMAScript 2.0 (1998年6月)和ECMAScript 3.0(1999年12月)。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,它奠定了 JavaScript 语言的基本语法,被其后的版本完全继承。直到今天,初学者一开始学习JavaScript,其实就是在学习3.0版的语法。

2000年,ECMAScript 4.0开始酝酿。这个版本最后没有通过,但其大部分内容被ES6所继承。因此,ES6制定的起点其实是在2000年。

为什么ES4没有通过呢?因为这个版本太激进了,对ES3做了彻底升级,导致标准委员会的一些成员不愿意接受。ECMA的第39号技术专家委员会(Technical Committee 39,简称TC39)负责制订ECMAScript标准,成员包括Microsoft、Mozilla、Google等大公司。

2007年10月,ECMAScript 4.0版草案发布,本来预计次年8月发布正式版本。但是,各方对于是否通过这个标准,发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司,反对JavaScript的大幅升级,主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司,则坚持当前的草案。

2008年7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激烈,ECMA开会决定,中止 ECMAScript 4.0 的开发,将其中涉及现有功能改善的一小部分发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号为Harmony(和谐)。会后不久,ECMAScript 3.1就改名为ECMAScript 5了。

2009年12月,ECMAScript 5.0版正式发布。Harmony项目则一分为二,一些较为可行的设想定名为JavaScript.next继续开发,后来演变成ECMAScript 6;一些不是很成熟的设想则被视为JavaScript.next.next,在更远的将来再考虑推出。TC39 委员会的总体考虑是,ES5 与ES3基本保持兼容,较大的语法修正和新功能的加入,将由JavaScript.next完成。当时,JavaScript.next指的是ES6,第6版发布以后就指ES7。TC39的判断是,ES5会在2013年的年中成为JavaScript开发的主流标准,并在此后5年中一直保持这个位置。

2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。

2013年3月,ECMAScript 6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7中。

2013年12月,ECMAScript 6草案发布。此后是12个月的讨论期,以听取各方反馈意见。

2015年 6 月,ECMAScript 6正式通过,成为国际标准。从 2000 年算起,已经过去了15年。1.5 部署进度

关于各大浏览器最新版本对于ES6的支持,可以参阅kangax.github.io/es5-compat-table/es6/。随着时间的推移,支持度已经越来越高,超过90%的ES6语法特性都实现了。

Node是JavaScript语言的服务器运行环境(runtime),它对ES6的支持度更高。除了那些默认打开的功能,还有一些语法功能也已经实现了,但是默认没有打开。使用如下命令,可以查看Node中已经实现的ES6特性。

执行以上命令,输出结果会因为版本的不同而有所不同。

笔者写了一个ES-Checker(github.com/ruanyf/es-checker)模块,用来检查各种运行环境对ES6的支持情况。访问ruanyf.github.io/es-checker即可查看所用浏览器对ES6的支持程度。运行下面的命令,可以查看本机对ES6的支持程度。1.6 Babel转码器

Babel(babeljs.io/)是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。这意味着,可以用ES6的方式编写程序,而不用担心现有环境是否支持。下面是一个例子。

上面的原始代码用了箭头函数,Babel 将其转为普通函数,这样就能在不支持箭头函数的JavaScript环境中执行了。1.6.1 配置文件.babelrc

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。

需要注意的是,要想使用以下所有Babel工具和模块,都必须先写好.babelrc。1.6.2 命令行转码babel-cli

Babel提供babel-cli工具,用于命令行转码。

它的安装命令如下。

基本用法如下。

上面的代码是在全局环境下进行 Babel 转码的。这意味着,如果项目要运行,全局环境中必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中,代码如下。

转码的时候需要执行以下命令。1.6.3 babel-node

babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。

babel-node不用单独安装,而是随babel-cli一起安装。执行 babel-node可以进入REPL环境。

babel-node命令可以直接运行ES6脚本。将上面的代码放入脚本文件es6.js,然后直接运行。

babel-node也可以安装在项目中。

然后,改写package.json。

在以上代码中,使用babel-node替代node,这样script.js本身就不用进行任何转码处理了。1.6.4 babel-register

babel-register 模块改写了 require 命令,为它加上一个钩子。此后,每当使用require加载后缀为.js、.jsx、.es和.es6的文件时,就会先用Babel进行转码。

使用时,必须首先加载babel-register。

这样便不需要手动对index.js进行转码了。

注意!

babel-register只会对require命令加载的文件进行转码,而不会对当前文件进行转码。另外,由于它是实时转码,所以只适合在开发环境中使用。1.6.5 babel-core

如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。安装命令如下。

然后,在项目中就可以调用babel-core了。

关于配置对象options的内容,可以参看官方文档,地址是babeljs.io/docs/usage/options/。

来看以下示例。transform 方法的第一个参数是一个字符串,表示需要被转换的 ES6 代码,第二个参数是转换的配置对象。1.6.6 babel-polyfill

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法,Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill为当前环境提供一个垫片。

安装命令如下。

然后,在脚本头部加入如下代码。

Babel 默认不转码的 API 非常多,详细清单可以查看 babel-plugin-transform-runtime模块的definitions.js(github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js)文件。1.6.7 浏览器环境

Babel也可以用于浏览器环境。但是,从Babel 6.0开始将不再直接提供浏览器版本,而是要用构建工具构建出来。如果没有或不想使用构建工具,可以使用 babel-standalone (github.com/Daniel15/babel-standalone)模块提供的浏览器版本,将其插入网页。

注意!

网页实时将 ES6 代码转为 ES5 代码,对性能会有影响。生产环境下需要加载已转码的脚本。

以下命令将代码打包成浏览器可以使用的脚本,以Babel配合Browserify为例。首先,安装babelify模块。

然后,再用命令行转换ES6脚本。

以上代码将ES6脚本script.js转为bundle.js,浏览器直接加载后者即可。

在package.json中添加下面的代码,则不必每次都输入参数。1.6.8 在线转换

Babel提供一个REPL在线编译器(babeljs.io/repl/),可以在线将ES6代码转为ES5代码。转换后的代码可以直接作为ES5代码插入网页并运行。1.6.9 与其他工具的配合

许多工具需要Babel进行前置转码,此处举两个例子:ESLint和Mocha。

ESLint用于静态检查代码的语法和风格,安装命令如下。

然后,在项目根目录下新建一个配置文件.eslintrc,在其中加入parser字段。

再在package.json中加入相应的scripts脚本。

Mocha 则是一个测试框架,如果需要执行使用 ES6 语法的测试脚本,可以将 package.json的scripts.test修改如下。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载