跳转到主要内容

@babel/template

在计算机科学中，这被称为准引用（quasiquotes）的实现。

安装​

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 不兼容

在查找应视为占位符的标识符和字符串字面量节点时要搜索的模式。'false' 将完全禁用占位符搜索，只留下 'placeholderWhitelist' 值来查找占位符。

preserveComments​

类型：boolean 默认值：false

将其设置为 true 以保留 code 参数中的任何注释。

返回值​

默认情况下，@babel/template 返回一个 function，该函数使用可选的替换对象进行调用。有关示例，请参见用法部分。

使用 .ast 时，将直接返回 AST。