@babel/generator

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Convierte el AST de Babel en código.

Instalación

npm

npm install --save-dev @babel/generator

Yarn

yarn add --dev @babel/generator

pnpm

pnpm add --save-dev @babel/generator

Bun

bun add --dev @babel/generator

Uso

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
);

información

Los símbolos como espacios en blanco o caracteres de nueva línea no se conservan en el AST. Cuando el generador de Babel imprime código desde el AST, el formato de salida no está garantizado.

Compatibilidad con plugins del parser

El generador de Babel es compatible con todos los plugins del parser de Babel listados excepto estree. Ten en cuenta que los plugins del parser no transforman el código. Por ejemplo, si pasas JSX <div></div> al generador de Babel, el resultado seguirá conteniendo el elemento JSX div.

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,
).code;

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

API

El generador de Babel contiene exactamente una función generate. Puede importarse de diferentes maneras.

JavaScript

const generate = require("@babel/generator");
const { generate } = require("@babel/generator");
import { generate } from "@babel/generator";

Opciones

History

Version	Changes
v8.0.0	Removed importAttributesKeyword
v7.26.0	Added experimental_preserveFormat
v7.22.0	Added importAttributesKeyword
v7.21.0	Added inputSourceMap

Opciones para formatear la salida:

name	type	default	description
auxiliaryCommentAfter	string		Optional string to add as a block comment at the end of the output file
auxiliaryCommentBefore	string		Optional string to add as a block comment at the start of the output file
comments	boolean	true	Should comments be included in output
compact	boolean or 'auto'	opts.minified	Set to true to avoid adding whitespace for formatting
concise	boolean	false	Set to true to reduce whitespace (but not as much as opts.compact)
decoratorsBeforeExport	boolean		Set to true to print decorators before export in output.
filename	string		Used in warning messages
importAttributesKeyword (⚠️ removed in Babel 8)	"with", "assert", or "with-legacy"		The import attributes/assertions syntax to use. "with" for import "..." with { type: "json" }, "assert" for import "..." assert { type: "json" }, and "with-legacy" for import "..." with type: "json". When not specified, @babel/generator will try to match the style in the input code based on the AST shape.
jsescOption	object		Use jsesc to process literals. jsesc is applied to numbers only if jsescOption.numbers (added in v7.9.0) is present. You can customize jsesc by passing options to it.
jsonCompatibleStrings	boolean	false	Set to true to run jsesc with "json": true to print "\u00A9" vs. "©";
minified	boolean	false	Should the output be minified
retainFunctionParens	boolean	false	Retain parens around function expressions (could be used to change engine parsing behavior)
retainLines	boolean	false	Attempt to use the same line numbers in the output code as in the source code (helps preserve stack traces)
shouldPrintComment	function	opts.comments	Function that takes a comment (as a string) and returns true if the comment should be included in the output. By default, comments are included if opts.comments is true or if opts.minified is false and the comment contains @preserve or @license
recordAndTupleSyntaxType	'hash' or 'bar'	'hash'	For use with the recordAndTuple token.
topicToken	'%' or '#'		The token to use with Hack-pipe topic references. This is required when there are any TopicReference nodes.

Opciones para mapas de origen:

name	type	default	description
sourceMaps	boolean	false	Enable generating source maps
inputSourceMap	string or object		The input source map
sourceRoot	string		A root for all relative URLs in the source map
sourceFileName	string		The filename for the source code (i.e. the code in the code argument). This will only be used if code is a string.

Opciones experimentales:

advertencia

El comportamiento de las opciones experimentales podría tener cambios rompedores en versiones menores.

name	type	default	description	experimental reason
experimental_preserveFormat	boolean	false	When set to true, the generator will try to preserve location of all the nodes and tokens that are present both in the input and output code. To use this option, you currently need to enable the retainLines: true generator option, and the tokens: true and createParenthesizedExpressions: true parser options.	This option will graduate to stable once it supports a mode that does not require preserving line numbers, but just relative positions of tokens.

Resultado

La API generate devuelve un objeto que contiene el código fuente y la información del mapa de origen cuando la opción sourceMaps está habilitada. Sus campos son:

• code: string - El código fuente de salida del AST proporcionado

• map: EncodedSourceMap | null - El mapa de origen de salida en forma codificada. Se evalúa de forma diferida

• decodedMap: DecodedSourceMap | undefined - El mapa de origen de salida en forma decodificada. Se evalúa de forma diferida

• rawMappings: Mapping[] - Un objeto de mapeo de alto nivel para cada segmento registrado, con el fin de generar el mapa de origen. Se evalúa de forma diferida

AST a partir de múltiples fuentes

En la mayoría de casos, Babel realiza una transformación 1:1 de archivo-entrada a archivo-salida. Sin embargo, podrías estar manejando un AST construido desde múltiples fuentes - archivos JS, plantillas, etc. Si este es el caso y quieres que los sourcemaps reflejen las fuentes correctas, deberás pasar un objeto a generate como parámetro code. Las claves deben ser los nombres de archivo fuente y los valores deben ser el contenido fuente.

Este es un ejemplo de cómo podría verse:

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.