在现代的前端开发中，组件化编程使用的越来越广泛，这使得我们需要使用大量的模板来构建页面。而 nunjucks-esm 就是一个适用于 Node.js 和浏览器的 JavaScript 模板引擎，可以帮助我们处理模板中的变量值和模板结构。
什么是 nunjucks-esm
nunjucks-esm 本质上是 nunjucks 的增强版，它是一个流行的模板引擎，它从简单的数据提取到复杂的逻辑表达式，使得我们可以更灵活地定义模板的视图结构。同时，nunjucks-esm 还支持一个非常有用的功能，即从外部文件中导入数据和自定义插件的功能。
如何使用 nunjucks-esm
在使用 nunjucks-esm 之前，我们需要先使用 npm 安装该包：
npm install nunjucks-esm --save
然后，我们需要在项目中引入 nunjucks-esm：
import * as nunjucks from "nunjucks-esm";
接下来，我们可以使用 nunjucks 的 render 方法来呈现模板和数据。例如，我们可以创建一个名为 template.html 的模板文件：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
------------------
------------------
-------
-------然后，我们将使用以下代码呈现该模板：
const html = nunjucks.render("template.html", {
title: "nunjucks-esm demo",
message: "Hello, world!",
});
console.log(html);最终将在控制台输出如下结果：
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------------
-------
------
---------------- ---------
--------- ----------
-------
-------在这个例子中，我们向模板中提供了一个 title 变量和一个 message 变量，并使用 nunjucks 的 render 方法呈现了这个模板和变量。
深入学习 nunjucks-esm
除了基本的变量插值，nunjucks-esm 还提供了丰富的标签和过滤器。标签用来创建逻辑和循环，而过滤器用来转换变量的值。这使得我们可以更加灵活地定义我们的模板结构。下面是一些常见的标签和过滤器：
标签
if：当满足特定条件时执行代码块。for：循环遍历列表。block和extends：使用继承创建可重用的模板部分。
过滤器
lower：将字符串转换为小写。upper：将字符串转换为大写。default：指定变量没有定义时的默认值。
示例代码
下面是一个使用 nunjucks-esm 创建一个 card 组件的示例代码：
<!-- card.html -->
<div class="card">
<div class="card-header">{{title | upper}}</div>
<div class="card-body">{{body}}</div>
</div>-- -------------------- ---- ------- -- ------- ------ - -- -------- ---- --------------- -------------------- ----------- ---- --- ----- ---- - -------------------- ------- ------------- ----- ------ ------- -------- ----------------- ----- - ------ ------------- ------ ---- --- -
在这个例子中，我们定义了一个 card 模板和一个 renderCard 函数，该函数接受一个 title 和 body 变量，并使用 nunjucks-esm 呈现出这个模板。同时，我们还使用了一个过滤器 upper 来将 title 变量值转换为大写。
总结
nunjucks-esm 是一个流行的模板引擎，它提供了很多有用的功能，例如标签和过滤器。使用 nunjucks-esm 可以帮助我们更好地管理模板和数据，提高我们的开发效率。通过学习本文中的内容，希望读者可以更深入地了解 nunjucks-esm 并掌握其使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66cb4