什么是 Babel？
Babel 是一个 JavaScript 编译器，它可以将高版本的 JavaScript 代码转换成向后兼容的低版本 JavaScript 代码。Babel 有许多插件和工具，可以实现比如语法转换、编译输出到指定环境、代码压缩、类型检查等多种功能。
Babel 官方提供了许多工具和插件，其中 @babel/generator 是一个将 Babel AST 转换回普通 JavaScript 代码的库。
npm 包 @divmain/babel-generator 简介
@divmain/babel-generator 是对 @babel/generator 的封装，通过对 AST 树进行遍历输出 JavaScript 代码。
@divmain/babel-generator 使用简单、高效，且拥有许多自定义输出配置，可以方便地控制生成的代码。
如何安装 @divmain/babel-generator？
向项目中添加 @divmain/babel-generator 可以使用 npm，在命令行中输入以下命令安装：
npm install @divmain/babel-generator
如果您使用的是 yarn，则可以使用以下命令安装：
yarn add @divmain/babel-generator
如何使用 @divmain/babel-generator？
首先，我们需要将 JavaScript 代码解析为 Babel AST，此处使用 @babel/parser。以下代码段示例将 JavaScript 代码解析为 AST 树：
import {parse} from '@babel/parser';
const code = 'const x = 1 + 2;';
const ast = parse(code);解析后的 AST 树结构如下：
-- -------------------- ---- -------
-
------- -------
-------- --
------ ---
------ ------
---------- -
------- ----------
-------- --
------ ---
------ ------
------------- ---------
-------------- -----
------- -
-
------- ----------------------
-------- --
------ ---
------ ------
--------------- - ----- --
------- -------
-
-
--
----------- --
-接下来，我们使用 @divmain/babel-generator 将解析后的 AST 树转换为 JavaScript 代码。以下代码段示例将 AST 树转换为 JavaScript 代码：
import {parse} from '@babel/parser';
import generate from '@divmain/babel-generator';
const code = 'const x = 1 + 2;';
const ast = parse(code);
const {code: generatedCode} = generate(ast);上面的代码中，generatedCode 即为生成的 JavaScript 代码。
生成的 JavaScript 代码：
const x = 1 + 2;
如何控制生成的代码？
可以使用第二个参数传递输出配置，以控制生成的代码。
以下代码段示例将添加分号选项传递给输出函数：
import {parse} from '@babel/parser';
import generate from '@divmain/babel-generator';
const code = 'const x = 1 + 2';
const ast = parse(code);
const {code: generatedCode} = generate(ast, {jsescOption: {minimal: true}});简单来说，我们可以传递一个包含以下属性的对象：
comments：生成代码中是否包含注释。minified：是否对生成代码进行压缩。quotes：生成的代码中使用单引号还是双引号。jsescOption：配置 jsesc 的选项。如：minimal 选项将尽量使用 Unicode 转义序列而非“\u”字符转义，以减小代码体积。
总结
@divmain/babel-generator 能够将 Babel AST 转换回普通 JavaScript 代码，它使用简单、高效，具有灵活的输出配置。
在实际使用中，我们可以通过解析 JavaScript 代码为 AST 树，使用 @divmain/babel-generator 对 AST 树进行遍历输出来得到需要的 JavaScript 代码。
最后，我们通过上述使用示例对 @divmain/babel-generator 进行了简单的介绍，希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/127483