跳至主内容

@babel/template

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

在计算机科学中，这被称为 quasiquotes 的一种实现。

安装​

npm install --save-dev @babel/template

字符串用法​

当使用字符串参数调用 template 函数时，你可以提供_占位符_，这些占位符将在模板被使用时进行替换。

你可以使用两种不同类型的占位符：语法占位符（例如 %%name%%）或标识符占位符（例如 NAME）。@babel/template 默认支持这两种方式，但它们不能混用。如果需要明确指定使用的语法，可以使用 syntacticPlaceholders 选项。

请注意，语法占位符是在 Babel 7.4.0 中引入的。如果无法控制 @babel/template 的版本（例如从 @babel/core@^7.0.0 的 peer 依赖导入时），则必须使用标识符占位符。另一方面，语法占位符具有以下优势：可在标识符会导致语法错误的地方使用（例如替代函数体或在导出声明中），且不会与全大写变量冲突（例如 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。这些接口也都包含上述 .ast 属性。

template​

template 根据解析结果返回单个语句或语句数组。

template.smart​

此接口与默认 template 相同，根据解析结果返回单个节点或节点数组。

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 解析器 的所有选项，并预设了以下默认值：

  • 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)。