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，第六版发布以后，就指 ES7。TC39 的判断是，ES5 会在 2013 年的年中成为 JavaScript 开发的主流标准，并在此后五年中一直保持这个位置。

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 年。

部署进度

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

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

$ node --v8-options | grep harmony

上面命令的输出结果，会因为版本的不同而有所不同。

工具 ES-Checker，用来检查各种运行环境对 ES6 的支持情况。访问ruanyf.github.io/es-checker，可以看到您的浏览器支持 ES6 的程度。运行下面的命令，可以查看你正在使用的 Node 环境对 ES6 的支持程度。

$ npm install -g es-checker

$ es-checker

=========================================

Passes 24 feature Dectations

Your runtime supports 57% of ECMAScript 6

=========================================

// 转码前

input.map(item => item + 1);

// 转码后

input.map(function (item) {

  return item + 1;

});

{

  "presets": [],

  "plugins": []

}

# 最新转码规则

$ npm install --save-dev babel-preset-latest

# react 转码规则

$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则（共有4个阶段），选装一个

$ npm install --save-dev babel-preset-stage-0

$ npm install --save-dev babel-preset-stage-1

$ npm install --save-dev babel-preset-stage-2

$ npm install --save-dev babel-preset-stage-3

 {

    "presets": [

      "latest",

      "react",

      "stage-2"

    ],

    "plugins": []

  }

$ npm install --global babel-cli

# 转码结果输出到标准输出

$ babel example.js

# 转码结果写入一个文件

# --out-file 或 -o 参数指定输出文件

$ babel example.js --out-file compiled.js

# 或者

$ babel example.js -o compiled.js

# 整个目录转码

# --out-dir 或 -d 参数指定输出目录

$ babel src --out-dir lib

# 或者

$ babel src -d lib

# -s 参数生成source map文件

$ babel src -d lib -s

# 安装

$ npm install --save-dev babel-cli

{

  // ...

  "devDependencies": {

    "babel-cli": "^6.0.0"

  },

  "scripts": {

    "build": "babel src -d lib"

  },

}

$ npm run build

$ babel-node

> (x => x * 2)(1)

2

$ babel-node es6.js

2

$ npm install --save-dev babel-cli

{

  "scripts": {

    "script-name": "babel-node script.js"

  }

}

$ npm install --save-dev babel-register

require("babel-register");

require("./index.js");

$ npm install babel-core --save

var babel = require('babel-core');

// 字符串转码

babel.transform('code();', options);

// => { code, map, ast }

// 文件转码（异步）

babel.transformFile('filename.js', options, function(err, result) {

  result; // => { code, map, ast }

});

// 文件转码（同步）

babel.transformFileSync('filename.js', options);

// => { code, map, ast }

// Babel AST转码

babel.transformFromAst(ast, code, options);

// => { code, map, ast }

var es6Code = 'let x = n => n + 1';

var es5Code = require('babel-core')

  .transform(es6Code, {

    presets: ['latest']

  })

  .code;

// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

$ npm install --save babel-polyfill

import 'babel-polyfill';

// 或者

require('babel-polyfill');

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

<script type="text/babel">

// Your ES6 code

</script>

$ npm install --save-dev babelify babel-preset-latest

$  browserify script.js -o bundle.js \

  -t [ babelify --presets [ latest ] ]

{

  "browserify": {

    "transform": [["babelify", { "presets": ["latest"] }]]

  }

}

$ npm install --save-dev eslint babel-eslint

{

  "parser": "babel-eslint",

  "rules": {

    ...

  }

}

 {

    "name": "my-module",

    "scripts": {

      "lint": "eslint my-files.js"

    },

    "devDependencies": {

      "babel-eslint": "...",

      "eslint": "..."

    }

  }

"scripts": {

  "test": "mocha --ui qunit --compilers js:babel-core/register"

}

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>

<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>

<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

<script type="module">

  import './Greeter.js';

</script>

<script type="module">

  class Calc {

    constructor() {

      console.log('Calc constructor');

    }

    add(a, b) {

      return a + b;

    }

  }

  var c = new Calc();

  console.log(c.add(4,5));

</script>

<script>

  // Create the System object

  window.System = new traceur.runtime.BrowserTraceurLoader();

  // Set some experimental options

  var metadata = {

    traceurOptions: {

      experimental: true,

      properTailCalls: true,

      symbols: true,

      arrayComprehension: true,

      asyncFunctions: true,

      asyncGenerators: exponentiation,

      forOn: true,

      generatorComprehension: true

    }

  };

  // Load your module

  System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {

    console.error('Import failed', ex.stack || ex);

  });

</script>

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>

<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>

<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

<script>

$traceurRuntime.ModuleStore.getAnonymousModule(function() {

  "use strict";

  var Calc = function Calc() {

    console.log('Calc constructor');

  };

  ($traceurRuntime.createClass)(Calc, {add: function(a, b) {

    return a + b;

  }}, {});

  var c = new Calc();

  console.log(c.add(4, 5));

  return {};

});

</script>

$ npm install -g traceur

$ traceur calc.js

Calc constructor

9

$ traceur --script calc.es6.js --out calc.es5.js

$ traceur --script calc.es6.js --out calc.es5.js --experimental

var traceur = require('traceur');

var fs = require('fs');

// 将 ES6 脚本转为字符串

var contents = fs.readFileSync('es6-file.js').toString();

var result = traceur.compile(contents, {

  filename: 'es6-file.js',

  sourceMap: true,

  // 其他设置

  modules: 'commonjs'

});

if (result.error)

  throw result.error;

// result 对象的 js 属性就是转换后的 ES5 代码

fs.writeFileSync('out.js', result.js);

// sourceMap 属性对应 map 文件

fs.writeFileSync('out.js.map', result.sourceMap);