在前端开发中，我们经常需要使用模板来生成网页。而 nunjucks 是一个非常流行的模板引擎，它的语法简洁明了，功能强大，易于扩展。但是在实际开发中，我们可能需要经常修改模板文件，并且想要实时预览修改后的效果。这时候，nunjucks-watch 就派上用场了。
nunjucks-watch 简介
nunjucks-watch 是一个 npm 包，它能够监听指定目录下的 nunjucks 模板文件的变化，并实时编译生成对应的 HTML 文件。使用 nunjucks-watch，我们可以实现模板文件的热更新，无需手动重新编译生成 HTML 文件。
安装
安装 nunjucks-watch 很简单，只需要在命令行中执行：
npm install nunjucks-watch --save-dev
使用
nunjucks-watch 的使用也十分简单。假设有如下目录结构：
. ├── src/ │ ├── index.njk │ └── base.njk └── dist/
其中，src 目录下有两个 nunjucks 的模板文件：index.njk 和 base.njk，dist 目录作为编译生成的 HTML 文件的输出目录。
接下来，我们只需要在命令行中执行：
nunjucks-watch src -o dist
nunjucks-watch 将监听 src 目录下的所有 nunjucks 模板文件的变化，并自动编译生成对应的 HTML 文件，输出到 dist 目录。
我们可以尝试修改 src/index.njk 文件，保存后，nunjucks-watch 会自动编译生成新的 dist/index.html 文件。
命令行选项
nunjucks-watch 提供了一些命令行选项，用于控制输出等：
-o, --output <directory>：设置编译生成的 HTML 文件的输出目录。默认为当前目录。-e, --ext <extensions>：设置文件扩展名。默认为njk,html。多个扩展名之间用逗号分隔。-w, --watch <additional-dirs>：同时监听多个目录的变化。-i, --include <include-dirs>：指定 nunjucks 的 include 路径。可以使用多次。-h, --help：显示帮助信息。
示例代码
以下是一个简单的例子，使用 nunjucks-watch 实现模板的实时更新：
-- -------------------- ---- -------
---- -------- ---
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----------
-------
------
---------- ------ -----------
-------- ----- ------- ---- -------- ---------
---------- ------ -----------
-------
-------<!-- index.njk -->
{% extends "base.njk" %}
{% block content %}
<h1>{{ message }}</h1>
{% endblock %}# 执行命令 nunjucks-watch src -o dist
-- -------------------- ---- -------
---- --------------- ---
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
-------
------
-----------------
------
--------- --------------------
-------
-----------------
-------
-------总结
通过本文，我们了解了 npm 包 nunjucks-watch 的简介、安装和使用方法，以及命令行选项和示例代码。nunjucks-watch 可以帮助我们实现 nunjucks 模板的实时更新，大大提高了前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66cec