ECMAScript的现状
ECMAScript，本身是一个脚本语言的设计规范，基于此规范，有许多为人熟知的语言，如JavaScript、ActionScript等。而时至几年前，随着Node.js的出现，以及HTML5带来的诸多新WebAPI，让JavaScript一下子提升到一个无比重要的位置。时至那个阶段，我们可以统称当时为ECMAScript5（ES5）。
那之后，很快就开始了对ECMAScript 2015（ES6）的制定，ES6一洗JS过去诸多的奇淫巧技、含糊不清的地方，带入了很多现代编程语言的特性，而且其推行的速度远比HTML5和CSS3要快。而在今天讨论ES6的时候，实际上ECMAScript 2016（ES7）已经在制定中（目前其实主要是修正和弥补ES6的不足），很多已经可以使用在实际生产环境中。
然而如上所述，即使是ES6，仍然有许多不足之处，所以急匆匆的ES7上线了，纵然你在使用ES6了，但是以今天的技术发展速度来说，既然ES7有了修正案，尽早的切入到ES7才能跟得上时代的步伐。
而JavaScript是一门需要环境依托运行的语言，无论是Browser环境下，还是服务器环境下，都需要环境的支持。下面这个列表，可以看到你的浏览器，和当前市面可支持JavaScript环境对ES6的支持情况：
https://kangax.github.io/compat-table/es6/
Babel
这时候，如果希望尝试使用ES6/ES7的，则可以使用Babel这个转译器。Babel本身的设计，就是针对JavaScript（所有需要转换为JavaScript）进行设计的。所以如官网的宣传语所说：
Babel transforms your JavaScript
Babel的官方网站： babeljs.io
Babel本身的设计是基于node.js环境下运行使用的，你也可以将babel-core用于浏览器环境。同时，有一个叫做 babel-standalone 的开源项目，则支持非node.js环境下使用Babel。
所以本文注重说明的是，基于node.js环境下配置和使用Babel的说明。
从深到潜，可以简单的将node.js下的配置使用情况区分为：CLI => 各种环境配置（GULP、IDE等）。
CLI环境
一般来说，使用Babel都是在各种环境内使用的，而很少直接使用CLI模式，但是这个模式能帮助理解Babel的基本配置。Babel有一大堆转换器插件，所以搞清楚他的配置方式是很必要的。
官方的博客有一篇基础环境下的安装说明： https://babeljs.io/blog/2015/10/31/setting-up-babel-6 ，这个篇章我只是将这个教程作为简单的翻译。
Babel基本安装
你有两个选项，全局的npm环境安装babel-cli，或当前项目下安装babel-core：
`shell npm install --global babel-cli // or npm install --save-dev babel-core
`
添加插件（Plugins）
你可以在项目的根目录添加一个 .babelrc 文件（json格式）。
假定你需要一叫做 es2015-arrow-functions 的特性支持：
`shell npm install --save-dev babel-plugin-transform-es2015-arrow-functions
`
注意，这是在当前项目目录添加的npm。
并修改 .babelrc 文件，将这个插件注册：
`json
{
"plugins": ["transform-es2015-arrow-functions"]
}
`
Babel提供了许多ES7的插件，具体可以查询官网的插件列表： Babel Plugins List。
插件的命名机制
这里特别说明一下，Babel的插件名的命名机制的问题
首先，你可以在 Babel Plugins List 查询到插件的列表，你会看到以下的内容：
可以看到插件名称，是诸如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping等。
其次，对应的在 Babel的github上的项目 中的 packages目录 下，上述的几个插件，名称则对应为：
`shell es2015-arrow-functions => babel-plugin-transform-es2015-arrow-functions es2015-block-scoped-functions => babel-plugin-transform-es2015-block-scoped-functions es2015-block-scoping => babel-plugin-transform-es2015-block-scoping
`
再次，这些插件写入到 .babelrc 的配置文件中的名称，则对应为：
`shell es2015-arrow-functions => transform-es2015-arrow-functions es2015-block-scoped-functions => transform-es2015-block-scoped-functions es2015-block-scoping => transform-es2015-block-scoping
`
为了统一称呼，我们定义如下：
插件名- 形如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping
插件（安装）包名- 形如：babel-plugin-transform-es2015-arrow-functions、babel-plugin-transform-es2015-block-scoped-functions、babel-plugin-transform-es2015-block-scoping
配置名- 形如：transform-es2015-arrow-functions、transform-es2015-block-scoped-functions、transform-es2015-block-scoping
一般来说，在 .babelrc 中，或者是gulp中，或者是使用 babel-standalone 的在线转译功能，都使用的是 配置名 。一定要区分这三者的区别，不然很容易出错。
Babel预设值（Presets）
目前作为Babel官方的预设，主要包含以下的内容：
这些预设，包含了相关所需的插件包，在你的babel配置中（.babelrc），可以混合多个preset使用，同时还可以在此基础上追加plugin。
使用预设置，和插件的用法类似，先执行npm安装所需的包，然后在配置中加载：
`shell npm install --save-dev babel-preset-es2015 babel-preset-react
`
在 .bablerc 文件中
`json
{
"presets": ["es2015", "react"]
}
`
gulp中使用
要在gulp中使用Babel是一个很简单的事情， 官方提供了简单教程 ，这里我就不翻译了，因为很简单。
特别说明一下的是，如果你需要在gulp使用Babel的某个插件，必须npm安装在当前项目中，而不能使用global。也即：
npm install babel-preset-es2015 --save-dev
。
gulp支持使用 .bablerc 。
在IDE环境中使用
这里以WebStorm为例， 官网提供了教程 ，但其实JetBrians系列的IDE提供了一个叫做File Wathcer的机制的东西，支持实时修改文件的同时，即可自动对译出目标的文件，包括js、css等。这里主要介绍一下如何使用File Watcher。
首先，你需要全局安装babel-cli：
`shell npm install --global babel-cli
`
其次，在WebStorm（JB家全系IDE通用），打开File -> Settings -> Tools -> File Watcher：
点击右上角的 + ，会看到如下的界面：
选择 Babel 项：
这里， File Type ，你可以选择ECMAScript 6，这样可以让你的项目保持对JS文件不进行处理。如下：
对于 Arguments ，你可以进行修改，具体的参数命令，可以参考 Babel Options，比如：
--source-maps --out-file $FileNameWithoutExtension$.js $FilePath$
。
至此，你可以在WebStorm的项目添加一个.es6的文件，每次保存的时候（你按Ctrl + S），他都会自动转译出一个.js文件出来。
使用babel-standalone实时转译
上面已经介绍过了， babel-standalone 提供了接近于官方Babel同步的版本，并可以在非node.js的环境中使用，而且这个类库整合了babel大部分的插件。
你可以通过bower进行安装：
`shell bower install babel-standalone --save
`
安装完毕后，直接在你的项目使用即可，他的转译参数，和 .babelrc 保持基本的一致。
`javascript
defined([‘babel-standalone‘], function(babel) {
var code = ‘let helloWorld = "hello world"; alert(helloWorld)‘;
var options = {
presets: [‘es2015‘],
plugins: [‘transform-es2015-modules-amd‘]
}
eval(babel.transforms(code, options));
})