@babel/generator

将 AST 转换为代码。

安装

npm
Yarn
pnpm

npm install --save-dev @babel/generator

yarn add --dev @babel/generator

pnpm add --save-dev @babel/generator

用法

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 打印代码时，不能保证输出格式。

选项

历史记录

版本	更改
v7.22.0	添加了 `importAttributesKeyword`
v7.21.0	添加了 `inputSourceMap`

用于格式化输出的选项

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

用于源映射的选项

名称	类型	默认值	描述
sourceMaps	布尔值	`false`	启用生成源映射
inputSourceMap	字符串或对象		输入源映射
sourceRoot	字符串		源映射中所有相对 URL 的根目录
sourceFileName	字符串		源代码的文件名（即 `code` 参数中的代码）。仅当 `code` 是字符串时才使用此选项。

来自多个源的 AST

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

以下是一个示例，说明它可能是什么样子

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.

安装​

用法​

选项​

来自多个源的 AST​

安装

用法

选项

来自多个源的 AST