简介
Babel 是一个广受欢迎的 JavaScript 编译器，它能够将新版本的 ECMAScript 代码转换成保持向后兼容性的旧版本代码。这意味着，您可以使用最新的语言特性写代码，而不必担心代码无法运行在旧的浏览器或其他环境中。
在本文中，我们将介绍一些关于 Babel 的工作原理和相关知识，以及如何使用 Babel 转换 JavaScript 代码。
工作原理
Babel 的工作原理可以分为三个阶段：
- 解析：将输入的代码解析成 AST（抽象语法树）。
- 转换：将 AST 转换成新的 AST，根据预设的规则对代码进行转换。
- 生成：将转换后的 AST 生成输出代码。
例如，假设有以下代码：
const num = 1;
在 Babel 中，这段代码会被解析成以下 AST：
-- -------------------- ---- -------
-
------- -------
---------- -
------- ----------
------------- ---------
------- -
-
------- ----------------------
--------------- -
-
------- ---------------------
----- -
------- -------------
------- -----
--
------- -
------- -----------------
-------- -
-
-
--
------- -------
-
-
--
----------- --
-接着，在转换阶段，根据预定义的规则，将 AST 转换成以下代码：
"use strict"; var _num = 1;
最后，在生成阶段，将转换后的 AST 生成输出代码。
相关知识
插件
在 Babel 中，转换规则是通过插件来实现的。Babel 本身只提供了一些基础的插件，如将箭头函数转换成普通函数、解构赋值等，但是这些插件并不能覆盖所有的语言特性。
因此，为了解决这个问题，社区提供了众多的插件，您可以根据需求选择合适的插件来转换 JavaScript 代码。
例如，要将 ES6 的箭头函数转换成普通函数，可以使用 @babel/plugin-transform-arrow-functions 插件：
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}预设
为了方便使用，Babel 提供了一些预设，预设是一组常用插件的集合。您可以通过预设一次性引入多个插件，而不需要一个一个地进行配置。
例如，要将 ES6 转换成浏览器可用的代码，可以使用 @babel/preset-env 预设：
{
"presets": ["@babel/preset-env"]
}Polyfill
除了将新版本 JavaScript 转换成旧版本的代码，Babel 还提供了一个叫做 Polyfill 的功能。Polyfill 是一种代码补丁，能够在旧版本的 JavaScript 环境中模拟新的 API，从而使得新的 API 在旧的环境中也能正常运行。
例如，如果想要在老版浏览器中使用 Promise，可以通过以下配置实现：
-- -------------------- ---- -------
-
---------- ---
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-这里，我们通过在预设中增加 "useBuiltIns": "usage"，告诉 Babel 只添加需要的 Polyfill 代码。而 "corejs": 3 则指定了使用的 core-js 版本为 3。
使用方法
命令行
Babel 可以通过命令行来转换 JavaScript 代码。需要先安装 Babel CLI。
安装：
npm install --save-dev @babel/cli
然后，可以通过以下命令来将文件夹 src 中的所有 .js 文件转换成 lib 目录下的文件。
npx babel src --out-dir lib
配置文件
除了通过命令行来转换代码，Babel 还支持使用配置文件来进行配置。Babel 的配置文件可以使用 .babelrc 或者 babel.config.js 两种格式。
例如，以下是一个简单的 .babelrc 配置文件：
{
"presets": ["@babel/preset-env"],
"plugins": []
}在代码中使用
除了在命令行或者配置文件中使用 Babel，还可以在代码中使用 Babel 进行转换，这通常用于构建工具或者服务端应用中。
以下是一个使用 Babel 进行转换的示例代码：
-- -------------------- ---- ------- ----- ----- - ----------------------- ----- ---- - - ----- --- - -- ----------------- -- ----- ------- - - -------- --------------------- -- --------------------- -------- ------------- ------- - ------------------------- ---
这段代码使用了 @babel/core 模块中的 transform 方法，将输入的代码和配置选项作为参数传入，最后输出转换后的代码。
总结
Babel 是一款强大的 JavaScript 编译器，它可以让您使用最新的语言特性编写代码，而不必担心代码无法运行在旧的环境中。在本文中，我们介绍了 Babel 的工作原理、预设、插件和 Polyfill 等相关知识，以及如何在命令行、配置文件和代码中使用 Babel 进行代码转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64abfdbc48841e98947eefa3