@babel/generator

将 Babel AST 转换为代码。

¥Turns Babel AST into code.

安装

¥Install

npm

npm install --save-dev @babel/generator

Yarn

yarn add --dev @babel/generator

pnpm

pnpm add --save-dev @babel/generator

用法

¥Usage

JavaScript

import { parse } from "@babel/parser";
import generate from "@babel/generator";

const code = "class Example {}";
const ast = parse(code);

const output = generate(
  ast,
  {
    /* options */
  },
  code
);

信息

AST 中不会保留空格或换行符等符号。当 Babel 生成器从 AST 打印代码时，不保证输出格式。

¥The symbols like white spaces or new line characters are not preserved in the AST. When Babel generator prints code from the AST, the output format is not guaranteed.

解析器插件支持

¥Parser plugins support

Babel 生成器支持除 estree 之外的所有列出的 Babel 解析器插件。请注意，解析器插件不会转换代码。例如，如果你将 JSX <div></div> 传递给 babel 生成器，结果仍将包含 div JSX 元素。

¥Babel generator supports all the listed Babel parser plugins except estree. Note that parser plugins do not transform the code. For example, if you pass JSX <div></div> to babel generator, the result will still contain the div JSX element.

JavaScript

import { parse } from "@babel/parser";
import generate from "@babel/generator";

const code = "const Example = () => <div>example</div>";
const ast = parse(code, { plugins: ["jsx" ] });

const output = generate(
  ast,
);

// true
output.includes("<div>");

选项

¥Options

History

版本	变化
v7.26.0	已添加 experimental_preserveFormat
v7.22.0	已添加 importAttributesKeyword
v7.21.0	已添加 inputSourceMap

格式化输出的选项：

¥Options for formatting output:

name	type	default	description
auxiliaryCommentAfter	string		在输出文件末尾添加为块注释的可选字符串
auxiliaryCommentBefore	string		在输出文件开头添加为块注释的可选字符串
comments	boolean	true	是否应在输出中包含注释
compact	布尔值或 'auto'	opts.minified	设置为 true 以避免为格式化添加空格
concise	boolean	false	设置为 true 以减少空格（但不如 opts.compact）
decoratorsBeforeExport	boolean		设置为 true 以在输出中 export 之前打印装饰器。
filename	string		用于警告消息
导入属性关键字	"with"、"assert" 或 "with-legacy"		要使用的导入属性/断言语法。"with" 用于 import "..." with { type: "json" }，"assert" 用于 import "..." assert { type: "json" }，"with-legacy" 用于 import "..." with type: "json"。未指定时，@babel/generator 将尝试根据 AST 形状匹配输入代码中的样式。
jsescOption	object		使用 jsesc 处理字面量。只有存在 jsescOption.numbers（添加到 v7.9.0）时，jsesc 才会应用于数字。你可以通过 传递选项 自定义 jsesc。
jsonCompatibleStrings	boolean	false	设置为 true 以使用 "json" 运行 jsesc：true 打印 "\u00A9" 与 "©"；
minified	boolean	false	是否应该缩小输出
retainFunctionParens	boolean	false	保留函数表达式周围的括号（可用于更改引擎解析行为）
retainLines	boolean	false	尝试在输出代码中使用与源代码相同的行号（有助于保留堆栈跟踪）
shouldPrintComment	function	opts.comments	如果注释应该包含在输出中，则接受注释（作为字符串）并返回 true 的函数。默认情况下，如果 opts.comments 是 true 或 opts.minified 是 false 并且注释包含 @preserve 或 @license，则包含注释
recordAndTupleSyntaxType	'hash' 或 'bar'	'hash'	与 recordAndTuple 令牌一起使用。
topicToken	'%' 或 '#'		与 黑客管道主题参考 一起使用的令牌。当有任何 TopicReference 个节点时，这是必需的。

源映射选项：

¥Options for source maps:

name	type	default	description
sourceMaps	boolean	false	启用生成源映射
输入源映射	字符串或对象		输入源映射
sourceRoot	string		源映射中所有相对 URL 的根
sourceFileName	string		源代码的文件名（即 code 参数中的代码）。这仅在 code 是字符串时使用。

实验选项：

¥Experimental options:

警告

实验性选项的行为可能会在小版本中发生重大变化。

¥The behavior of experimental options could have breaking changes in minor versions.

name	type	default	description	实验原因
experimental_preserveFormat	boolean	false	设置为 true 时，生成器将尝试保留输入和输出代码中存在的所有节点和标记的位置。要使用此选项，你当前需要启用 retainLines: true 生成器选项以及 tokens: true 和 createParenthesizedExpressions: true 解析器选项。	一旦该选项支持不需要保留行号而只需要保留标记相对位置的模式，它将逐渐稳定。

来自多个来源的 AST

¥AST from Multiple Sources

在大多数情况下，Babel 会进行输入文件到输出文件的 1:1 转换。但是，你可能正在处理由多个来源构建的 AST - JS 文件、模板等。如果是这种情况，并且你希望源映射反映正确的源，则需要将一个对象作为 code 参数传递给 generate。键应该是源文件名，值应该是源内容。

¥In most cases, Babel does a 1:1 transformation of input-file to output-file. However, you may be dealing with AST constructed from multiple sources - JS files, templates, etc. If this is the case, and you want the sourcemaps to reflect the correct sources, you'll need to pass an object to generate as the code parameter. Keys should be the source filenames, and values should be the source content.

这是一个可能看起来像的示例：

¥Here's an example of what that might look like:

JavaScript

import { parse } from "@babel/parser";
import generate from "@babel/generator";

const a = "var a = 1;";
const b = "var b = 2;";
const astA = parse(a, { sourceFilename: "a.js" });
const astB = parse(b, { sourceFilename: "b.js" });
const ast = {
  type: "Program",
  body: [].concat(astA.program.body, astB.program.body),
};

const { code, map } = generate(
  ast,
  { sourceMaps: true },
  {
    "a.js": a,
    "b.js": b,
  }
);

// Sourcemap will point to both a.js and b.js where appropriate.