可能是最清晰的 Babel 原理入门解读
Babel 是一个非常流行的 JavaScript 编译器，用于将最新的 ECMAScript 代码转换为向后兼容的版本，以便在所有现代浏览器中使用。Babel 是由 Facebook 开发和维护的，并使用了许多其他社区提供的插件和功能。
在本文中，我们将深入探讨 Babel 的原理。如果您是一个前端开发者正在学习 Babel，那么本文将为您提供更深入的了解，帮助您更好地理解 Babel 是如何工作的。
Babel 的工作原理
Babel 最基本的工作原理是将 JavaScript 代码作为输入，然后使用称为转换器的插件将其转换为不同的 JavaScript 代码。这个过程包括三个主要步骤：
解析：将 JavaScript 代码解析成 AST（Abstract Syntax Tree）。
转换：使用插件将 AST 转换为指定的输出代码。
生成：将新的 JavaScript 代码生成为输出文件。
下面将分别介绍这三个步骤。
解析
解析器是执行 Babel 的第一个步骤。解析器的作用是将 JavaScript 代码解析为 AST，包括识别代码中的每个单词并将其转换为语法元素、确定指令的执行顺序等等。解析器将 JavaScript 代码解析为 AST，可以使代码更容易转换并更好地理解。
在 Babel 中，解析器使用了称为 Babylon 的独立的 JavaScript 解析器，它实际上是由 Acorn 解析器衍生而来的。Babylon 解析器负责将 JavaScript 代码转换为 AST 并将其传递给下一个步骤。
转换
转换器是将 AST 转换为指定输出代码的步骤。转换器使用称为插件的预处理器以及通常与这些插件一起使用的规则文件来更改 AST。这种改变可以是任何内容，如从一个模块系统连接到另一个模块系统，添加不支持的特性，等等。
Babel 可以使用不同的插件按照预定义的方式转换 AST。插件时针对不同语法特性的，例如 ES6，JSX，Flow 等。这些插件可以从同一源中加载，也可以同时加载，这使得 Babel 能够将多种转换嵌套在一起。
以下是一个使用 Babel 转换 ES6 class 的示例：
-- -------------------- ---- -------
-- --- -----
----- ------- -
------------- -
--------- - --------
-
-
-- ------ ------------------------- ----- ------------
----- ------- - --- ----------
-- -- --- ----- - ---
-- -- --------------- -------- ------------------------------- --------- ---
----- ----------- - ---------------------- ------- - ------------- - --------- - -------- - --- -
-------- ---------------------- --------- --- -- -----
---
------------------------------ -- --------生成
生成器是将 AST 转换为指定的输出代码的最后一步。在这一步中，Babel 采用转换器生成的 AST 并将其转换为一个完整的 JavaScript 代码块。生成器可以通过添加缩进、删除不必要的空格并在最后添加分号等方法来优化生成的代码。
使用 Babel 生成的代码块如下所示：
"use strict";
var Example = function Example() {
this.name = "Babel";
};
var example = new Example();插件和预设
Babel 的插件和预设是影响 Babel 的最重要的因素之一。它们允许你添加、删除和更改 Babel 的行为。插件是一种特殊的 JavaScript 库，可以应用到转换器中，以将转换器应用到指定的类，函数或语句。而预设是一组插件的集合，这些插件的设置已经预先设置好了。使用预设可以轻松地添加常见的转换方式。
使用 Babel 时，大多数开发人员都使用以下三个 Babel 预设：
● @babel/preset-env – 包括将最新的 ECMAScript 标准转换为向后兼容的代码功能。
● @babel/preset-react – 包括将 JSX 代码转换为普通的 JavaScript 代码功能。
● @babel/preset-typescript – 用于与 TypeScript 代码集成。
以下是一个使用 Babel 预设创建一些转换的示例：
-- -------------------- ---- -------
-- -- ---------------- -- ------ --
--- ------- ----------------- ----------
-- -- ----------------- ---- ----- --
-
---------- -
-------------------
-
-
-- -- ------------------ -- --- --
--- ------- ------------------- ----------
-- -- ----------------- ---- ----- --
-
---------- -
---------------------
-
-
-- -- ----------------------- -- ---------- --
--- ------- ------------------------ ----------
-- -- ----------------- ---- ----- --
-
---------- -
--------------------------
-
-总结
在本文中，我们深入探讨了 Babel 的工作原理，包括其解析、转换和生成的步骤。我们还介绍了插件和预设，这些是影响 Babel 工作的因素。通过对 Babel 的深入研究和了解，我们可以更好地理解其功能，帮助我们更好地使用 Babel 来开发 JavaScript 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461c7dc968c7c53b0320926