关于babel: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）：将增加到下一个年度版本公布中。