第一章 ECMAScript6简介
由来
第一章第一节讲述了 ES6 这个名称的由来,首先需要理清 ECMAScript 和 JavaScript 的关系。在最开始 JavaScript 不叫 JavaScript,而是叫 ECMAScript。因此,ECMAScript 是 JavaScript 的规格,JavaScript 是 ECMAScript 的一种实现。
含义
2011年,ECMAScript 5.1 版本发布后,6.0 版本开始制定,这个版本改动较大,制定者希望能够6.1、6.2、6.3持续推进,最终决定每年6月更新发布一次标准版本。2015年6月,发布了 ECMAScript 6.0 版本。
🖇 拓展
因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版本以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,而 ES2015 则是正式名称,特指当年发布的正式版本的语言标准。
提案批准流程
- Stage 0: Strawman (展示阶段)
- Stage I : Proposal (征求意见阶段)
- Stage 2: Draft (草案阶段)
- Stage 3: Candidate (候选阶段)
- Stage 4: Finished (定案阶段)
历史
ES6 从开始制定到最后发布用了整整15年。1997年发布的ES1.0是第一个版本,随后连续发布了ES2.0和ES3.0。ES3.0成为通行标准,奠定了 JavaScript 语言的基本语法。在2000年,ES4.0开始酝酿,但最后没有通过。ES6 制定的起点其实可以追溯到2000年。ES4.0没有通过是因为该版本对ES3.0做了彻底升级,导致标准委员会的一些成员不愿意接受。
2008年,ECMA决定中止ES4.0的开发,并将其中涉及现有功能改善的部分发布为ES3.1,其他激进设想放入以后的版本。
2009年,ES5 发布,而ES Harmony继续发展成为 ES6。2015年,ES6正式通过成为国际标准。整个过程历时15年。
Babel
babel.js 是 ES6 转码器,在浏览器不支持 ES6 语法时转码为 ES5,这样就能执行了,下面是一个简单的例子:
let arr = []
arr.map(item => item.id + 1)var arr = []
arr.map(function (item) {
return item.id + 1
})其中阮一峰老师从以下几个方面介绍讲解起了 babel :
配置文件
.babelrc这是放置在项目根目录中,用于设置转码规则和插件,其基本包含
presets和plugins两个参数。其中presets用于设定转码规则,通过 NPM 下载依赖,下载后在presets数组中添加对应的规则。例子如下:js{ "presets": [], "plugins": [] }js{ "presets": [ "latest", "react", "stage-2", ], "plugins": [] }⚠ 注意
要想使用以下所有 Babel 工具和模块,都必须先写好 .babelrc。
命令行转码
Babel 提供babel-clibabel-cli工具,用于命令行转码。使用方式如下:下载依赖
改写
package.json文件打包转码
shellnpm i --save-dev babel-clijson{ // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "build": "babel src -d lib" } }shellnpm run buildbabel-node
这是
babel-cli自带的命令,用于提供支持 ES6 的 REPL 环境,直接运行 ES6 代码。babel-register
修改
require命令,后续使用require加载.js、jsx、.es和.es6文件时,会优先使用 Babel 转码。⚠ 注意
babel-register只会对require命令加载的文件进行转码,而不会对当前文件进行转码。另外,由于它是实时转码,所以只适合在开发环境中使用。babel-core
对需要的某模块代码转码。
shellnpm install babel-core --savejsvar es6Code = 'let x = n => n + 1' var es5Code = require('babel-core').transform(es6Code, { presets: ['latest']}).code;babel-polyfill
Babel 默认只转换新的JavaScript句法(syntax),而不转换新的 API,如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(如Object.assign)都不会转码。想让上述的方法运行,必须使用
babel-polyfill为当前环境提供一个垫片。
Traceur
Traceur 是 Google 公司的转码器,也可以将 ES6 代码转为 ES5 代码。具体使用此处不做过多描述。
总结
本章讲解了 JavaScript 的历史和发展史,以及 ES6 广义和狭义的含义。在浏览器不支持 ES6 新语法时如何使用 Babel 转成 ES5 等。