Babel presets stage

在一些新框架的代码中，常基于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 至 stage-3代表了es标准支持的不同阶段。0阶段是最初级的阶段，可以理解为仅仅才开始讨论标准， 换句话说就是基本没有什么浏览器支持es新标准。3表示成熟阶段，意味着主流浏览器的新版本都支持大部分新标准，基础的es新标准特性不需要降级编译为es5，浏览器即可原生支持。

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-plugin-transform-runtime

这个插件的存在解决了polyfill引入而带来的全局变量污染和语法降级helper重复的问题。试想如果我们的项目不是全写在一个JS文件里，而是分散到不同的JS文件中去的，同一个高级EcamaScript语法可能在多个JS文件中被使用到，在降级转译高级语法的时候，会出现多个用于降级转译的helper，比如_extend、_defineProperty等，文件分散得越多，重复得可能性越大，最后转译出的静态资源也就越大，这是很可怕的。这个插件的存在就是为了解决这个问题，他提供了一个统一的文件来保存所有的helper，当每个JS文件被转译时，其所需的helper都从这个统一的文件中require，而不是自己申明一个，这样就避免了重复。并且它提供了一个沙盒环境用来限制一些新API的命名空间，防止全局变量出现污染，这对你在一个库或者一个工具里使用babel来说特别重要，你肯定不希望你的库或者工具分发给他人使用时，你的库中的变量直接污染了全局变量空间吧。当然如果只是我们在自己的项目应用中使用，这种污染是可以接受的。

babel-plugin-import

支持模块的按需加载，比如我们使用React和Antd作为MVVM的库和UI组件库。对于Antd提供的UI组件我们可能并非所有的组件都有用到，因为一次性引入整个Antd(包括js和css)对我们来说不是必要的，而我们又不愿意import一个组件很长的文件路径和对应的样式路径，对于我们来说直接 import {Button} from 'antd'; 才是最方便的。该插件即提供了这个功能，我们只需要这样写就行，babel会帮我们自动引入其关联的样式文件，而非整个Antd库。

还有其他的插件也有很大几率使用到，这取决于你的开发和测试需求，这里就不再过多讲解，在babel官网中会有相应介绍，有兴趣的同学可以自行查看。

另外的，在.babelrc文件中，我们一般需要配置plugins和presets，plugins的每个内容项为单独的一个插件，执行顺序从上到下。而presets里的每个内容项表示为实现某个功能的某些插件的集合，可能一个presets的配置项包含有多个插件，执行顺位为从下到上。总执行顺序为先执行plugins，在执行presets的内容。