@babel/generator

Turns Babel AST into code.

Install

  • npm
  • Yarn
  • pnpm
  1. npm install --save-dev @babel/generator
  1. yarn add --dev @babel/generator
  1. pnpm add --save-dev @babel/generator

Usage

JavaScript

  1. import { parse } from "@babel/parser";
  2. import generate from "@babel/generator";
  3. const code = "class Example {}";
  4. const ast = parse(code);
  5. const output = generate(
  6. ast,
  7. {
  8. /* options */
  9. },
  10. code
  11. );

@babel/generator - 图1info

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

  1. import { parse } from "@babel/parser";
  2. import generate from "@babel/generator";
  3. const code = "const Example = () => <div>example</div>";
  4. const ast = parse(code, { plugins: ["jsx" ] });
  5. const output = generate(
  6. ast,
  7. );
  8. // true
  9. output.includes("<div>");

Options

History

VersionChanges
v7.22.0Added importAttributesKeyword
v7.21.0Added inputSourceMap

Options for formatting output:

nametypedefaultdescription
auxiliaryCommentAfterstringOptional string to add as a block comment at the end of the output file
auxiliaryCommentBeforestringOptional string to add as a block comment at the start of the output file
commentsbooleantrueShould comments be included in output
compactboolean or ‘auto’opts.minifiedSet to true to avoid adding whitespace for formatting
concisebooleanfalseSet to true to reduce whitespace (but not as much as opts.compact)
decoratorsBeforeExportbooleanSet to true to print decorators before export in output.
filenamestringUsed in warning messages
importAttributesKeyword“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.
jsescOptionobjectUse 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.
jsonCompatibleStringsbooleanfalseSet to true to run jsesc with “json”: true to print “\u00A9” vs. “©”;
minifiedbooleanfalseShould the output be minified
retainFunctionParensbooleanfalseRetain parens around function expressions (could be used to change engine parsing behavior)
retainLinesbooleanfalseAttempt to use the same line numbers in the output code as in the source code (helps preserve stack traces)
shouldPrintCommentfunctionopts.commentsFunction 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 for source maps:

nametypedefaultdescription
sourceMapsbooleanfalseEnable generating source maps
inputSourceMapstring or objectThe input source map
sourceRootstringA root for all relative URLs in the source map
sourceFileNamestringThe filename for the source code (i.e. the code in the code argument). This will only be used if code is a string.

AST from Multiple Sources

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

  1. import { parse } from "@babel/parser";
  2. import generate from "@babel/generator";
  3. const a = "var a = 1;";
  4. const b = "var b = 2;";
  5. const astA = parse(a, { sourceFilename: "a.js" });
  6. const astB = parse(b, { sourceFilename: "b.js" });
  7. const ast = {
  8. type: "Program",
  9. body: [].concat(astA.program.body, astB.program.body),
  10. };
  11. const { code, map } = generate(
  12. ast,
  13. { sourceMaps: true },
  14. {
  15. "a.js": a,
  16. "b.js": b,
  17. }
  18. );
  19. // Sourcemap will point to both a.js and b.js where appropriate.