刀刀博客 - 刀刀博客

第一章 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 数组中添加对应的规则。例子如下：
.babelrcpresets详细参数
js
```
{
  "presets": [],
  "plugins": []
}
```
1
2
3
4
js
```
{
  "presets": [
    "latest",
    "react",
    "stage-2",
  ],
  "plugins": []
}
```
1
2
3
4
5
6
7
8
⚠ 注意
要想使用以下所有 Babel 工具和模块，都必须先写好 .babelrc。
命令行转码 babel-cli
Babel 提供 babel-cli 工具，用于命令行转码。使用方式如下：
1. 下载依赖
2. 改写 package.json 文件
3. 打包转码
下载依赖改写package.json文件打包转码
shell
```
npm i --save-dev babel-cli
```
1
json
```
{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  }
}
```
1
2
3
4
5
6
7
8
9
shell
```
npm run build
```
1
babel-node
这是 babel-cli 自带的命令，用于提供支持 ES6 的 REPL 环境，直接运行 ES6 代码。
babel-register
修改 require 命令，后续使用 require 加载 .js、jsx、.es 和 .es6 文件时，会优先使用 Babel 转码。
⚠ 注意
babel-register 只会对 require 命令加载的文件进行转码，而不会对当前文件进行转码。另外，由于它是实时转码，所以只适合在开发环境中使用。

babel-core

对需要的某模块代码转码。

下载依赖使用示例

shell

npm install babel-core --save

var 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 等。

贡献者

duyidao

v_duyilin

刀刀

页面历史

最后编辑于 2 个月前

查看完整历史

第一章 ECMAScript6简介 ​

由来 ​

含义 ​

提案批准流程 ​

历史 ​

Babel ​

Traceur ​

总结 ​

贡献者

页面历史

第一章 ECMAScript6简介

由来

含义

提案批准流程

历史

Babel

Traceur

总结