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-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的内容。