简介
NPM 是一个很强大的工具。它可以让我们轻松地发送和接收代码，管理包依赖，以及安装和更新包。这篇文章会介绍一个非常实用的 NPM 包，叫做 Minn。
Minn 是一个轻量级的 JavaScript 模板引擎，它具有简单易用的语法，可以帮助你轻松地创建和渲染 HTML。它支持变量，表达式，条件语句和循环语句等基本语法。Minn 很适合用于创建静态网页，单页应用程序，以及快速创建原型。
安装
你可以通过如下命令安装 Minn：
npm install minn
使用
使用 Minn 很简单，只需要在代码中引入 Minn 模块，然后将模板和变量传递给 Minn 渲染函数，就可以得到渲染后的 HTML。
const minn = require('minn');
const template = '<p>Hello, {{name}}!</p>';
const html = minn(template, { name: 'world' });
console.log(html); // <p>Hello, world!</p>在这个例子中，我们创建了一个模板字符串，其中包含了一个变量 name。然后我们将这个模板和 { name: 'world' } 对象传递给 Minn 函数，Minn 会将 {{name}} 替换为 'world' 字符串，最后返回渲染后的 HTML。
语法
Minn 支持以下基本语法：
输出变量
使用 {{ variable }} 或 {{{ variable }}} 输出变量，Minn 会将包含在双大括号或三大括号中的变量替换为其对应的值。
const template = '<p>{{ name }}</p>';
const html = minn(template, { name: 'Tom' });
console.log(html); // <p>Tom</p>上面的例子中，我们定义了一个模板字符串，其中包含了一个变量 name。我们将 { name: 'Tom' } 对象传递给 Minn 函数，Minn 会将 {{ name }} 替换为 'Tom' 字符串，最后返回渲染后的 HTML。
如果你的变量包含 HTML 代码，可以使用三大括号 {{{ variable }}} 来输出它，Minn 会将 HTML 代码原封不动地输出。
注释
使用 {# comment #} 来添加注释，Minn 会忽略掉注释。
const template = '<p>{{ name }}</p>{# This is a comment #}';
const html = minn(template, { name: 'Tom' });
console.log(html); // <p>Tom</p>条件语句
使用 {% if condition %} ... {% endif %} 来创建条件语句。
const template = '{% if score >= 60 %}<p>Pass</p>{% else %}<p>Fail</p>{% endif %}';
const html1 = minn(template, { score: 80 });
const html2 = minn(template, { score: 40 });
console.log(html1); // <p>Pass</p>
console.log(html2); // <p>Fail</p>上面的例子中，我们定义了一个模板字符串，其中包含了一个条件语句，我们使用 score 变量来控制条件语句的执行，如果 score >= 60，则输出 <p>Pass</p>，否则输出 <p>Fail</p>。
循环语句
使用 {% for item in array %} ... {% endfor %} 来创建循环语句。
const template = '{% for item in list %}<li>{{ item }}</li>{% endfor %}';
const html = minn(template, { list: ['apple', 'banana', 'orange'] });
console.log(html); // <li>apple</li><li>banana</li><li>orange</li>上面的例子中，我们定义了一个模板字符串，其中包含了一个循环语句，我们使用 list 数组来控制循环语句的执行，循环遍历数组中的每一个元素，输出一个列表项。
总结
Minn 是一个非常实用的 NPM 包，可以帮助你轻松地创建和渲染 HTML。本文介绍了 Minn 的安装和使用方法，以及 Minn 支持的基本语法。希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d381e8991b448e01fb