Babel 简介

本教程咱们学习 Babel 的基础知识，Babel 是一个用于 web 开发，且自由开源的 JavaScript 编译器、转换器。主要用于在当前和较旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为 JavaScript 的向后兼容版本。

Babel 使软件开发者可以以偏好的编程语言或风格来写做源代码，并将其利用 Babel 翻译成 JavaScript，是现今在浏览器最经常使用的编程语言。

下列是 Babel 的使用场景：

• 语法转换。
• 目标环境中缺乏的 Polyfill 功能。
• 源代码转换（codemods）

示例：

例如将 ES2015 中的箭头函数编译成 ES5：

[1, 2, 3].map((n) => n + 1);

编译后的 ES5 代码以下所示：

[1, 2, 3].map(function (n) {
  return n + 1;
});

这两段代码的功能是同样的，可是由于 ES2015 和 ES5 的语法有所不一样，因此编译后的代码也不一样。

Babel运行方式和插件

Babel 的编译总共分为三个阶段：解析（parsing），转换（transformation），生成（generate）。

Babel 自己不具备任何转化功能，Babel 的转换功能都是经过插件（plugin）来实现的，把转化的功能都分解到一个个插件里面。所以当咱们不配置任何插件时，通过 Babel 的代码和输入是相同的。

插件总共分为两种：

• 语法插件：当咱们添加语法插件以后，在解析这一步就使得 Babel 可以解析更多的语法。
• 转译插件：而添加转译插件以后，在转换这一步把源码转换并输出。这也是咱们使用 Babel 最本质的需求。

同一类语法可能同时存在语法插件版本和转译插件版本。若是咱们使用了转译插件，就不用再使用语法插件了。

preset

preset 预约义的一系列插件的组合，用于将特定的语法转换为当前环境使用的语法，避免了本身单独去挑选插件。

preset 分为如下几种：

• 官方内容，目前包括 env、react、flow、minify 、typescript 等。
• stage-x，这里面包含的都是当年最新规范的草案，每一年更新。能够细分为：
  • Stage 0：设想（Strawman）：只是一个想法，可能有 Babel插件。
  • Stage 1：建议（Proposal）：这是值得跟进的。
  • Stage 2： 草案（Draft）：初始规范。
  • Stage 3： 候选（Candidate）：完成规范并在浏览器上初步实现。
  • Stage 4：完成（Finished）：将添加到下一个年度版本发布中。