@babel/generator

Turns Babel AST into code.

Install

• npm
• Yarn
• pnpm

npm install --save-dev @babel/generator

yarn add --dev @babel/generator

pnpm add --save-dev @babel/generator

Usage

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

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

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,
);
// true
output.includes("<div>");

Options

History

Options for formatting output:

Options for source maps:

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

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.