@babel/generator

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Trasforma l'AST di Babel in codice.

Installazione

npm
Yarn
pnpm
Bun

npm install --save-dev @babel/generator

yarn add --dev @babel/generator

pnpm add --save-dev @babel/generator

bun add --dev @babel/generator

Utilizzo

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

informazioni

I simboli come spazi bianchi o caratteri di nuova riga non vengono preservati nell'AST. Quando il generatore di Babel stampa codice dall'AST, il formato di output non è garantito.

Supporto ai plugin del parser

Il generatore di Babel supporta tutti i plugin del parser di Babel elencati, tranne estree. Nota che i plugin del parser non trasformano il codice. Ad esempio, se passi JSX <div></div> al generatore di Babel, il risultato conterrà ancora l'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

Il generatore di Babel contiene esattamente una funzione generate. Può essere importata in diversi modi.

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

Opzioni

History

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

Opzioni per la formattazione dell'output:

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.

Opzioni per le source map:

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.

Opzioni sperimentali:

avviso

Il comportamento delle opzioni sperimentali potrebbe subire breaking changes nelle versioni minori.

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.

Risultato

L'API generate restituisce un oggetto contenente il codice sorgente e le informazioni della source map quando l'opzione sourceMaps è abilitata. I suoi campi sono:

code: string - Il codice sorgente generato dall'AST fornito
map: EncodedSourceMap | null - La source map di output in forma codificata. La valutazione è lazy
decodedMap: DecodedSourceMap | undefined - La source map di output in forma decodificata. La valutazione è lazy
rawMappings: Mapping[] - Un oggetto di mappatura di alto livello per ogni segmento registrato, necessario per generare la source map. La valutazione è lazy

AST da più sorgenti

Nella maggior parte dei casi, Babel effettua una trasformazione 1:1 da file di input a file di output. Tuttavia, potresti gestire AST costruiti da più sorgenti - file JS, template, ecc. In questo caso, se vuoi che le source map riflettano le sorgenti corrette, dovrai passare a generate come parametro code un oggetto le cui chiavi corrispondono ai nomi dei file sorgente e i valori al loro contenuto.

Ecco un esempio di come potrebbe apparire:

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.

Installazione​

Utilizzo​

Supporto ai plugin del parser​

API​

Opzioni​

Risultato​

AST da più sorgenti​