介绍
在前端开发中，我们经常会用到模板来渲染页面。目前前端比较流行的模板引擎有 Handlebars、EJS、Pug 等。而在这些模板引擎中，Nunjucks 是一款兼顾易用性和灵活性的引擎，被广泛应用于前端项目中。
Nunjucks 除了提供基本的模板语法外，还支持继承、过滤器等高级功能。如果可以将这些高级功能应用到项目中，会大大提升我们的开发效率和代码质量。
本文介绍一款可以实现 Nunjucks 高级功能的 npm 包——nunjucks-resolve-loader。
使用
安装依赖
在使用 nunjucks-resolve-loader 之前，我们需要先安装 Nunjucks 和 nunjucks-resolve-loader。
--- ------- -------- ----------------------- ----------
Webpack 配置
在配置 webpack 时，需要先添加 loader，可配置如下：
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- --------------------
---- -
-
------- --------------------------
-------- -
----- ----------------------- -----------------
--
--
--
--
--
--
--使用模板
接着，在代码中使用模板文件即可。
例如，我们把模板文件放在 ./src/templates/ 目录下，准备使用一个名为 index.njk 的模板文件，代码如下：
-- -------- ----- -------- - -------------------- -- ------ ------------------------------------------ ------------------- - ----------- ---- --- -- ---- ----- ------ - ---------------------------- - ------ ------- -------- ---
使用下面的 Nunjucks 模板：
---- --------- --- -- ------- ---------- -- -- ----- ------- -- ------ ----- ------- -- -------- --
使用 {% extends "base.njk" %} 继承一个名为 base.njk 的模板，{% block content %} 为我们提供了一个占位符，用于后续填充内容。
其中，title 是我们指定的一个传递给模板的参数，在 render 方法中不同的参数值即可渲染不同的内容。
Nunjucks 模板继承
模板继承是 Nunjucks 最强大的功能之一，可以实现模板的复用和组合。
使用子模板继承父模板，在父模板中定义一个或多个 block，子模板可以重写这些 block 或插入变量或语句，同时也可以使用继承的父模板的 block。
示例如下：
---- -------- --- --------- ----- ----- ---------- -- ----- ---- -- ------ ----- ---------------- --------- ----- ----- ---- -------- ---------- -- ----- ----- ---- -------- -- ------- -- -------- -- -- ----- ---- -- ------ -- ----- ------- ---- -------- -- -- ----- ------ ---- -------- -- ------- -- -------- -- -------
在子模板中使用 extends 继承父模板。例如，创建一个名为 index.njk 的子模板，代码如下：
---- --------- --- -- ------- ---------- -- -- ----- ----- -- ------ ------ -- -------- -- -- ----- ------- -- ------ ----- ------- -- -------- --
在 render 方法中只需传递 index.njk 和参数即可正常渲染。
小结
我们一起学习了一个还不那么流行的 npm 包 nunjucks-resolve-loader，并通过示例代码演示了如何使用 nunjucks-resolve-loader 解析 Nunjucks 模板。
当你在开发前端项目时遇到类似需求，不妨试试 nunjucks-resolve-loader。它可以帮助你通过 Webpack 加载分析模板的继承关系、引用路径等，还支持添加自定义 filter、函数等，让你在前后端模板渲染方面更加高效和灵活。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f953d1de16d83a66cdb