@babel/generator

ASTをコードに変換します。

インストール

npm
Yarn
pnpm

npm install --save-dev @babel/generator

yarn add --dev @babel/generator

pnpm add --save-dev @babel/generator

使用方法

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

情報

空白や改行文字のような記号はASTでは保持されません。BabelジェネレーターがASTからコードを出力する際、出力形式は保証されません。

オプション

履歴

バージョン	変更点
v7.22.0	`importAttributesKeyword`を追加
v7.21.0	`inputSourceMap`を追加

出力のフォーマットに関するオプション

name	type	default	説明
auxiliaryCommentAfter	string		出力ファイルの末尾にブロックコメントとして追加するオプションの文字列
auxiliaryCommentBefore	string		出力ファイルの先頭にブロックコメントとして追加するオプションの文字列
comments	boolean	`true`	コメントを出力に含めるかどうか
compact	boolean または `'auto'`	`opts.minified`	フォーマットのための空白の追加を避けるには`true`に設定
concise	boolean	`false`	空白を減らすには`true`に設定（ただし`opts.compact`ほどではありません）
decoratorsBeforeExport	boolean		出力で`export`の前にデコレーターを出力するには`true`に設定します。
filename	string		警告メッセージで使用されます
importAttributesKeyword	`"with"`, `"assert"`, または `"with-legacy"`		使用するインポート属性/アサーション構文。`import "..." with { type: "json" }`の場合は`"with"`、`import "..." assert { type: "json" }`の場合は`"assert"`、`import "..." with type: "json"`の場合は`"with-legacy"`。指定しない場合、`@babel/generator`はASTの形状に基づいて入力コードのスタイルに一致させようとします。
jsescOption	object		リテラルを処理するために`jsesc`を使用します。`jsesc`は、`jsescOption.numbers`（`v7.9.0`で追加）が存在する場合にのみ数値に適用されます。`jsesc`は、オプションを渡すことでカスタマイズできます。
jsonCompatibleStrings	boolean	`false`	「©」ではなく「\u00A9」を出力するために、"json": true で`jsesc`を実行するにはtrueに設定します。
minified	boolean	`false`	出力がminifyされるかどうか
retainFunctionParens	boolean	`false`	関数式の周りの括弧を保持します（エンジンの解析動作を変更するために使用できます）
retainLines	boolean	`false`	出力コードでソースコードと同じ行番号を使用しようとします（スタックトレースを保持するのに役立ちます）
shouldPrintComment	function	`opts.comments`	コメント（文字列として）を受け取り、コメントを出力に含める必要がある場合は`true`を返す関数。デフォルトでは、`opts.comments`が`true`の場合、または`opts.minified`が`false`でコメントに`@preserve`または`@license`が含まれている場合にコメントが含まれます。
recordAndTupleSyntaxType	`'hash'` または `'bar'`	`'hash'`	recordAndTupleトークンで使用します。
topicToken	`'%'` または `'#'`		Hackパイプトピック参照で使用するトークン。`TopicReference`ノードがある場合に必要です。

ソースマップのオプション

name	type	default	説明
sourceMaps	boolean	`false`	ソースマップの生成を有効にする
inputSourceMap	string または object		入力ソースマップ
sourceRoot	string		ソースマップ内のすべての相対URLのルート
sourceFileName	string		ソースコードのファイル名（つまり、`code`引数内のコード）。これは、`code`が文字列の場合にのみ使用されます。

複数のソースからのAST

ほとんどの場合、Babelは入力ファイルから出力ファイルへの1対1の変換を行います。ただし、複数のソース（JSファイル、テンプレートなど）から構築されたASTを処理している場合があります。この場合、ソースマップが正しいソースを反映するようにするには、codeパラメータとしてgenerateにオブジェクトを渡す必要があります。キーはソースファイル名であり、値はソースコンテンツである必要があります。

以下は、その例です

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.

インストール​

使用方法​

オプション​

複数のソースからのAST​

インストール

使用方法

オプション

複数のソースからのAST