跳至主要內容

@babel/template

在電腦科學中，這稱為準引號的實作。

安裝​

npm install --save-dev @babel/template

字串用法​

當以字串引數呼叫 template 作為函式時，你可以提供 佔位符，這些佔位符將在使用範本時被替換。

你可以使用兩種不同的佔位符：語法佔位符（例如 %%name%%）或識別碼佔位符（例如 NAME）。@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 揭露幾個彈性的 API，讓建立具有預期結構的 AST 變得盡可能容易。其中每個 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

將此設定為 true 以保留 code 參數中的任何註解。

傳回值​

預設情況下，@babel/template 會傳回一個 function，並使用一個可選的替換物件呼叫。請參閱使用部分以取得範例。

使用 .ast 時，會直接傳回 AST。