在一些新框架的代码中，常基于es6/7标准来书写代码。鉴于这些标准被没有被浏览器广泛支持，我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码。
以.babelrc文件配置babel为例，presets预设编译规则(预设的编译插件集合)可以设置stage-0 至 stage-3， stage-0包含了stage-1 至 stage-3，也就是说如果设置为stage-0，stage-1 至 stage-3的编译功能默认都有了。
Stage 0：提案，经过 TC39 成员提出即可
Stage 1：初步尝试
Stage 2：完成初步规范
Stage 3：完成规范以及主流浏览器初步实现
Stage 4：完全完成，将被添加到下一年度进行发布，因此不会存在针对这个阶段的配置项
Stage < 4的提案，不保证都能成为真正的标准并定稿。
stage-3包括以下插件：
transform-async-to-generator 支持async/await
transform-exponentiation-operator 支持幂运算符语法糖，用两个**表示
stage-2包括stage-3的所有插件，额外还包括以下插件：
syntax-trailing-function-commas 支持尾逗号函数，额...很鸡肋
transform-object-reset-spread 支持对象的解构赋值
stage-1包括stage-2所有插件，额外还包括以下插件：
transform-class-constructor-call 支持class的构造函数
transform-class-properties 支持class的static成员（静态属性与静态方法）
transform-decorators 支持es7的装饰者模式即@，这其实是很有用的特性，对于HOC来说这是一个不错的语法糖
transform-export-extensions 支持export方法
stage-0包括stage-1所有插件，额外还包括以下插件：
transform-do-expressions 支持在jsx中书写if/else
transform-function-bind 支持::操作符来切换上下文，并且支持链式调用，作用类似于es5的bind
每个插件所支持的特性在代码上的具体体现可查看es6/7标准等详细资料，或babel官方站点，
Babel默认只转换新的JavaScript语法，但不会去转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定在全局对象上定义的方法，例如：Object.assign等，这些都不会被转换。 默认不转码的 API 非常多，详情查看。
也就是当我们使用ES2015语法进行开发的时候，要去适配一些在ES2015定稿之前发行的浏览器，可能还需要使用到babel-polyfill，来保证上述提到的不被转换的API等都能够有ES3/5的支持，从而确保我们的项目在运行的时候不会因语法报错而白屏。
在实际配置babel presets stage的时候，可以根据业务要求、书写爱好、文件大小以及要兼容的浏览器及其版本来酌情设置。
对于babel的核心和其他插件，在实际项目开发中我们常用的到的还有：
babel-core
它是babel实现最基础代码转译功能的核心，用于将我们书写的高级EcmaScript语法转成AST语法抽象树，分发给不同的插件进行语法分析，进而转译成低级的EcmaScript语法。
babel-runtime
包含降级转译所需的各种helper方法，以实现ES6的新特性，比如各种内置对象、_extend、_defineProperty等，还包括对各种异步语法的转换。
babel-plugin-transform-runtime
这个插件的存在解决了polyfill引入而带来的全局变量污染和语法降级helper重复的问题。试想如果我们的项目不是全写在一个JS文件里，而是分散到不同的JS文件中去的，同一个高级EcamaScript语法可能在多个JS文件中被使用到，在降级转译高级语法的时候，会出现多个用于降级转译的helper，比如_extend、_defineProperty等，文件分散得越多，重复得可能性越大，最后转译出的静态资源也就越大，这是很可怕的。这个插件的存在就是为了解决这个问题，他提供了从 babel-runtime 获取helper并插入到每个需要编译的JS文件内的功能。当每个JS文件被转译时，其所需的helper都从 babel-runtime 这个统一的文件中require，而不是自己申明一个，这样就避免了重复。并且它提供了一个沙盒环境用来限制一些新API的命名空间，防止全局变量出现污染，这对你在一个库或者一个工具里使用babel来说特别重要，你肯定不希望你的库或者工具分发给他人使用时，你的库中的变量直接污染了全局变量空间吧。当然如果只是我们在自己的项目应用中使用，这种污染是可以接受的。
babel-plugin-import
这是一个由antd发布的插件，支持模块的按需加载。比如我们使用React和Antd作为MVVM的库和UI组件库。对于Antd提供的UI组件我们可能并非所有的组件都有用到，因为一次性引入整个Antd(包括js和css)对我们来说不是必要的，而我们又不愿意import一个组件很长的文件路径和对应的样式路径，对于我们来说直接 import {Button} from 'antd'; 才是最方便的。该插件即提供了这个功能，我们只需要这样写就行，babel会帮我们自动引入其关联的样式文件，而非整个Antd库。
还有其他的插件也有很大几率使用到，这取决于你的开发和测试需求，这里就不再过多讲解，在babel官网中会有相应介绍，有兴趣的同学可以自行查看。
另外的，在.babelrc文件中，我们一般需要配置plugins和presets，对于plugins和presets可以这么理解：
plugins的每个内容项为单独的一个插件，执行顺序从上到下。
而presets里的每个内容项表示为实现某个功能的某些插件的集合，可能一个presets的配置项包含有多个插件，执行顺位为从下到上。
总的执行顺序为先执行plugins，再执行presets的内容。
来源：https://www.cnblogs.com/rock-roll/p/6250149.html