Saltar al contenido principal

@babel/template

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

En informática, esto se conoce como una implementación de quasiquotes.

Instalación​

npm install --save-dev @babel/template

Uso con cadenas​

Al llamar template como función con un argumento de cadena, puedes proporcionar marcadores de posición que se sustituirán cuando se utilice la plantilla.

Puedes usar dos tipos diferentes de marcadores de posición: sintácticos (ej. %%name%%) o de identificador (ej. NAME). @babel/template admite ambos enfoques por defecto, pero no pueden mezclarse. Si necesitas ser explícito sobre qué sintaxis estás usando, puedes usar la opción syntacticPlaceholders.

Ten en cuenta que los marcadores de posición sintácticos se introdujeron en Babel 7.4.0. Si no controlas la versión de @babel/template (por ejemplo, al importarlo desde una dependencia peer como @babel/core@^7.0.0), debes usar marcadores de posición de identificador. Por otro lado, los marcadores sintácticos tienen ventajas: pueden usarse donde los identificadores producirían errores de sintaxis (ej. en cuerpos de funciones o declaraciones de exportación), y no entran en conflicto con variables en mayúsculas (ej. new URL()).

Entrada (marcadores sintácticos):

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

Entrada (marcadores de identificador):

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

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

Salida:

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

.ast​

Si no se usan marcadores de posición y solo quieres una forma sencilla de analizar una cadena en un AST, puedes usar la versión .ast de la plantilla.

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

que analizará y devolverá el AST directamente.

Uso con literales de plantilla​

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

Ten en cuenta que los marcadores de posición pueden pasarse directamente como parte del literal de plantilla para máxima legibilidad, o pueden pasarse a la función de plantilla.

.ast​

Si no se usan marcadores de posición y solo quieres una forma sencilla de analizar una cadena en un AST, puedes usar la versión .ast de la plantilla.

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

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

que analizará y devolverá el AST directamente. Ten en cuenta que, a diferencia de la versión basada en cadenas mencionada anteriormente, al ser un literal de plantilla aún es válido realizar sustituciones usando reemplazos de literales de plantilla.

Resultados AST​

La API @babel/template expone varias interfaces flexibles para facilitar la creación de ASTs con estructura predecible. Cada una incluye la propiedad .ast mencionada anteriormente.

template​

template devuelve una sola declaración o un array de declaraciones, según el resultado del análisis.

template.smart​

Es idéntico a la API template predeterminada, devuelve un único nodo o un array de nodos según el resultado del análisis.

template.statement​

template.statement("foo;")() devuelve un nodo de declaración única, y lanza una excepción si el resultado no es exactamente una declaración.

template.statements​

template.statements("foo;foo;")() devuelve un array de nodos de declaración.

template.expression​

template.expression("foo")() devuelve el nodo de expresión.

template.program​

template.program("foo;")() devuelve el nodo Program para la plantilla.

API​

template(code, [opts])​

código​

Tipo: string

opciones​

@babel/template acepta todas las opciones del Babel Parser y especifica algunos valores predeterminados propios:

  • allowReturnOutsideFunction se establece en true por defecto.

  • allowSuperOutsideMethod se establece en true por defecto.

  • sourceType se establece en module por defecto.

syntacticPlaceholders​

Tipo: boolean Valor predeterminado: true si se usan marcadores de posición estilo %%foo%%; false en caso contrario. Añadido en: v7.4.0

Cuando esta opción es true, puedes usar %%foo%% para marcar placeholders en tus plantillas. Cuando es false, los placeholders son identificadores determinados por las opciones placeholderWhitelist y placeholderPattern.

placeholderWhitelist​

Tipo: Set<string> Valor predeterminado: undefined

Esta opción no es compatible con syntacticPlaceholders: true

Conjunto de nombres de placeholders para aceptar automáticamente. Los elementos en esta lista no necesitan coincidir con el patrón de placeholder especificado.

placeholderPattern​

Tipo: RegExp | false Valor predeterminado: /^[_$A-Z0-9]+$/

Esta opción no es compatible con syntacticPlaceholders: true

Patrón para buscar nodos Identifier y StringLiteral que deben considerarse placeholders. 'false' desactiva completamente la búsqueda de placeholders, dejando solo 'placeholderWhitelist' para encontrarlos.

preserveComments​

Tipo: boolean Valor predeterminado: false

Establécelo en true para conservar los comentarios del parámetro code.

Valor de retorno​

Por defecto @babel/template devuelve una function que se invoca con un objeto opcional de reemplazos. Consulta la sección de uso para ver un ejemplo.

Al usar .ast, se devuelve el AST directamente.