## 一、概述 ***Babel 是一个 JavaScript 编译器***； 它是一个工具链，主要用于**将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法**，以便能够运行在当前和旧版本的浏览器或其他环境中。 ## 二、实例  ## 三、应用 基于新版ES编程，考虑兼容性，编译为老版本js代码； 所以，对应js编程，只要Babel支持的特性，即使当前标准不支持，都可以使用，Babel可以把它编译成浏览器支持的版本； ## 四、插件体系 Babel 构建在插件之上。使用现有的或者自己编写的插件可以组成一个转换管道。通过使用或创建一个preset即可轻松使用一组插件； Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和生成。 babel 本身不具有任何转化功能，它把转化的功能都分解到一个个 plugin 里面。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。 插件总共分为两种： 1、当我们添加**语法插件**之后，在解析这一步就使得 babel 能够解析更多的语法。(顺带一提，babel 内部使用的解析类库叫做 babylon，并非 babel 自行开发)； 2、当我们添加**转译插件**之后，在转换这一步把源码转换并输出。这也是我们使用 babel 最本质的需求。 ## 五、使用方法 既然插件是 babel 的根本，那如何使用呢？总共分为 2 个步骤： 1. 将插件的名字增加到配置文件中 (根目录下创建 .babelrc 或者 package.json 的`babel`里面，格式相同) 2. 使用`npm install babel-plugin-xxx`进行安装 ## 六、preset 比如 es2015 是一套规范，包含大概十几二十个转译插件。如果每次要开发者一个个添加并安装，配置文件很长不说，`npm install`的时间也会很长，更不谈我们可能还要同时使用其他规范呢。 为了解决这个问题，babel 还提供了一组插件的集合。因为常用，所以不必重复定义 & 安装。(单点和套餐的差别，套餐省下了巨多的时间和配置的精力) preset 分为以下几种： * 官方内容，目前包括 env, react, flow, minify 等。这里最重要的是 env，后面会详细介绍。 * stage-x，这里面包含的都是当年最新规范的草案，每年更新。 这里面还细分为 * Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。 * Stage 1 - 提案: 初步尝试。 * Stage 2 - 初稿: 完成初步规范。 * Stage 3 - 候选: 完成规范和浏览器初步实现。 * Stage 4 - 完成: 将被添加到下一年度发布。 ## 七、执行顺序 * Plugin 会运行在 Preset 之前。 * Plugin 会从前到后顺序执行。 * Preset 的顺序则**刚好相反**(从后向前)。