在前端开发中，构建和维护复杂工程的过程中，经常需要用到模板引擎，@frctl/nunjucks 是一个非常优秀的 Nunjucks 模板引擎实现，它对于前端团队而言，可以让我们更加专注于页面的设计和交互，降低工程维护的复杂度和成本。
前置环境
安装 @frctl/nunjucks 的前置环境如下：
- 安装 Node.js 并配置环境变量
- 安装 NPM 包管理器
安装 @frctl/nunjucks
有以下两种方式来安装 @frctl/nunjucks：
安装全局 @frctl/nunjucks:
npm install -g @frctl/nunjucks
安装局部 @frctl/nunjucks:
npm install --save @frctl/nunjucks
@frctl/nunjucks 模板使用
1. 模板编写
Nunjucks 模板可以是HTML，JS代码和其它任意内容的任意组合。标记模板语言的核心思想是把模板和代码分离。
下面给出一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
-------
------
------------------
----
-- --- ---- -- ----- --
-----------------
-- ------ --
-----
-------
-------2. 渲染模板
使用 @frctl/nunjucks 有两种方式，一种是使用 Node.js 自带的 nunjucks 模块，另一种就是使用本文介绍的@frctl/nunjucks。
以下面的例子为例，通过 @frctl/nunjucks 跑一个模板：
-- -------------------- ---- ------- ----- ------------- - --------------------------- ----- --- - --------------------------------- - --------- - ----------- ----- -------- --- --- ------------ ------------- ---- - ------------------------ - ------ ----- ------ --------- --------- -------- --- ---
注意到上述示例中的 configure 方法，它接受两个参数：模板存放目录和配置项。其中 autoescape 用于替代标签的字符转义功能。
3. 导入模板
在具体的示例中常会遇到模板的继承和代码框架的结构，而此时我们需要手动对模板进行整理，借助于 include 可以实现模板文件的导入。
以下面的例子为例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----- -- -- -------- ----------
-- ----- --------- ---- -------- --
-------
------
---------------------
---------------
-- ----- ------- ---- -------- --
---------------------
-- ----- ------- ---- -------- --
-------
-------总结
通过@frctl/nunjucks，我们可以快速地开发复杂的前端工程，它的初学门槛并不算很高，只需要掌握一定的基础语法，就能灵活地运用 @frctl/nunjucks 模板引擎，实现更加灵活、高效的页面开发。
附录：示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------ ---- ---- -------- -------- --------------
-------
------
-------- ---------
------------------
----
-- --- ---- -- ----- --
-----------------
-- ------ --
-----
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcca4b5cbfe1ea0612844