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：
npm install --global babel-cli
// or
npm install --save-dev babel-core
添加插件（Plugins）
你可以在项目的根目录添加一个 .babelrc 文件（json格式）。
假定你需要一叫做 es2015-arrow-functions 的特性支持：
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
注意，这是在当前项目目录添加的npm。
并修改 .babelrc 文件，将这个插件注册：
{
"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目录下，上述的几个插件，名称则对应为：
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 的配置文件中的名称，则对应为：
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安装所需的包，然后在配置中加载：
npm install --save-dev babel-preset-es2015 babel-preset-react
在 .bablerc 文件中
{
"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：
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进行安装：
bower install babel-standalone --save
安装完毕后，直接在你的项目使用即可，他的转译参数，和 .babelrc 保持基本的一致。
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));
})
来源：oschina
链接：https://my.oschina.net/u/57579/blog/668688