@babel/generator

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Transforme l'AST de Babel en code.

Installation

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

Utilisation

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

info

Les symboles comme les espaces blancs ou les caractères de nouvelle ligne ne sont pas conservés dans l'AST. Lorsque le générateur Babel imprime du code à partir de l'AST, le format de sortie n'est pas garanti.

Prise en charge des plugins d'analyse syntaxique

Le générateur Babel prend en charge tous les plugins d'analyse syntaxique de Babel listés, à l'exception de estree. Notez que les plugins d'analyse syntaxique ne transforment pas le code. Par exemple, si vous passez du JSX <div></div> au générateur Babel, le résultat contiendra toujours l'élément 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

Le générateur Babel contient exactement une fonction generate. Elle peut être importée de différentes manières.

JavaScript

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

Options

History

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

Options de mise en forme de la sortie :

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.

Options pour les source maps :

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.

Options expérimentales :

avertissement

Le comportement des options expérimentales peut subir des changements cassants dans des versions mineures.

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.

Résultat

L'API generate renvoie un objet contenant le code source et les informations de source map lorsque l'option sourceMaps est activée. Ses champs sont :

• code: string - Le code source généré à partir de l'AST fourni

• map: EncodedSourceMap | null - La source map de sortie sous forme encodée. Elle est évaluée de manière paresseuse

• decodedMap: DecodedSourceMap | undefined - La source map de sortie sous forme décodée. Elle est évaluée de manière paresseuse

• rawMappings: Mapping[] - Un objet de mappage de haut niveau pour chaque segment enregistré afin de générer la source map. Il est évalué de manière paresseuse

AST provenant de multiples sources

Dans la plupart des cas, Babel effectue une transformation 1:1 d'un fichier d'entrée vers un fichier de sortie. Cependant, vous pourriez traiter un AST construit à partir de multiples sources - fichiers JS, templates, etc. Si c'est le cas et que vous souhaitez que les source maps reflètent les bonnes sources, vous devrez passer un objet à generate comme paramètre code. Les clés doivent correspondre aux noms de fichiers sources, et les valeurs doivent contenir le contenu source.

Voici un exemple de ce à quoi cela pourrait ressembler :

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.