メインコンテンツにスキップ

@babel/template

コンピュータサイエンスでは、これは準クォートの実装として知られています。

インストール​

npm install --save-dev @babel/template

文字列の使用法​

文字列引数付きの関数としてtemplateを呼び出す場合、テンプレートが使用されるときに置き換えられるプレースホルダーを指定できます。

プレースホルダーには、構文プレースホルダー（例：%%name%%）または識別子プレースホルダー（例：NAME）の2種類を使用できます。@babel/templateはデフォルトでこれらの両方のアプローチをサポートしていますが、これらを混在させることはできません。使用している構文について明示的に指定する必要がある場合は、syntacticPlaceholdersオプションを使用できます。

構文プレースホルダーはBabel 7.4.0で導入されたことに注意してください。@babel/templateのバージョンを制御できない場合（たとえば、@babel/core@^7.0.0ピア依存関係からインポートする場合）、識別子プレースホルダーを使用する必要があります。一方、構文プレースホルダーにはいくつかの利点があります。識別子が構文エラーになる場所（関数の本体やエクスポート宣言など）で使用でき、大文字の変数（例：new URL()）と競合しません。

入力（構文プレースホルダー）

JavaScript
import template from "@babel/template";
import generate from "@babel/generator";
import * as t from "@babel/types";

const buildRequire = template(`
  var %%importName%% = require(%%source%%);
`);

const ast = buildRequire({
  importName: t.identifier("myModule"),
  source: t.stringLiteral("my-module"),
});

console.log(generate(ast).code);

入力（識別子プレースホルダー）

JavaScript
const buildRequire = template(`
  var IMPORT_NAME = require(SOURCE);
`);

const ast = buildRequire({
  IMPORT_NAME: t.identifier("myModule"),
  SOURCE: t.stringLiteral("my-module"),
});

出力

JavaScript
const myModule = require("my-module");

.ast​

プレースホルダーを使用しておらず、文字列をASTに解析する簡単な方法が必要な場合は、テンプレートの.astバージョンを使用できます。

JavaScript
const ast = template.ast(`
  var myModule = require("my-module");
`);

これにより、ASTが直接解析されて返されます。

テンプレートリテラルの使用法​

JavaScript
import template from "@babel/template";
import generate from "@babel/generator";
import * as t from "@babel/types";

const source = "my-module";

const fn = template`
  var IMPORT_NAME = require('${source}');
`;

const ast = fn({
  IMPORT_NAME: t.identifier("myModule"),
});

console.log(generate(ast).code);

プレースホルダーは、読みやすくするためにテンプレートリテラルの一部として直接渡すことも、テンプレート関数に渡すこともできます。

.ast​

プレースホルダーを使用しておらず、文字列をASTに解析する簡単な方法が必要な場合は、テンプレートの.astバージョンを使用できます。

JavaScript
const name = "my-module";
const mod = "myModule";

const ast = template.ast`
  var ${mod} = require("${name}");
`;

これにより、ASTが直接解析されて返されます。前に述べた文字列ベースのバージョンとは異なり、これはテンプレートリテラルであるため、テンプレートリテラルの置換を使用して置換を実行することは依然として有効です。

ASTの結果​

@babel/template APIは、期待される構造を持つASTをできるだけ簡単に作成できるように、いくつかの柔軟なAPIを公開しています。これらの各APIには、上記で説明した.astプロパティもあります。

template​

templateは、解析結果に応じて、単一のステートメントまたはステートメントの配列のいずれかを返します。

template.smart​

これは、デフォルトのtemplate APIと同じで、解析結果に応じて、単一のノードまたはノードの配列のいずれかを返します。

template.statement​

template.statement("foo;")()は、単一のステートメントノードを返し、結果が単一のステートメント以外の場合は例外をスローします。

template.statements​

template.statements("foo;foo;")()は、ステートメントノードの配列を返します。

template.expression​

template.expression("foo")()は、式のノードを返します。

template.program​

template.program("foo;")()は、テンプレートのProgramノードを返します。

API​

template(code, [opts])​

code​

型: string

options​

@babel/templateは、Babel Parserのすべてのオプションを受け入れ、独自のデフォルトを指定します

  • allowReturnOutsideFunctionは、デフォルトでtrueに設定されています。
  • allowSuperOutsideMethodは、デフォルトでtrueに設定されています。
  • sourceTypeは、デフォルトでmoduleに設定されています。

syntacticPlaceholders​

型: boolean デフォルト: %%foo%%スタイルのプレースホルダーが使用されている場合はtrue、それ以外の場合はfalse。追加: v7.4.0

このオプションがtrueの場合、テンプレートでプレースホルダーをマークするために%%foo%%を使用できます。falseの場合、プレースホルダーはplaceholderWhitelistおよびplaceholderPatternオプションで決定される識別子です。

placeholderWhitelist​

型: Set<string> デフォルト: undefined

このオプションはsyntacticPlaceholders: trueとは互換性がありません

自動的に受け入れるプレースホルダー名のセット。このリストの項目は、指定されたプレースホルダーパターンと一致する必要はありません。

placeholderPattern​

型: RegExp | false デフォルト: /^[_$A-Z0-9]+$/

このオプションはsyntacticPlaceholders: trueとは互換性がありません

プレースホルダーと見なす必要があるIdentifierおよびStringLiteralノードを探すときに検索するパターン。'false'はプレースホルダーの検索を完全に無効にし、プレースホルダーを見つけるための「placeholderWhitelist」値のみを残します。

preserveComments​

型: boolean デフォルト: false

codeパラメーターからコメントを保持するには、これをtrueに設定します。

戻り値​

デフォルトでは、@babel/templateは、オプションの置換オブジェクトで呼び出されるfunctionを返します。例については、使用法のセクションを参照してください。

.astを使用する場合、ASTが直接返されます。