Mozilla/Nunjucks 模板引擎入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00294/article/details/148439859

Mozilla/Nunjucks 模板引擎入门指南

nunjucks A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired) 项目地址: https://gitcode.com/gh_mirrors/nu/nunjucks

什么是Nunjucks？

Nunjucks是由Mozilla开发的一款功能强大的JavaScript模板引擎，它基于Jinja2的设计理念，支持模板继承、异步控制等高级特性。无论是Node.js服务端渲染还是浏览器前端模板处理，Nunjucks都能提供出色的解决方案。

安全警告：用户自定义模板风险

在使用Nunjucks时，开发者必须特别注意：

无沙箱执行环境：Nunjucks不会对模板执行进行沙箱隔离
服务器端风险：直接执行用户提供的模板可能导致数据泄露和执行风险
客户端风险：即使用预编译模板，仍可能存在跨站脚本问题

建议在生产环境中采取严格的内容安全策略(CSP)来降低风险。

安装指南

Node.js环境安装

通过npm可以快速安装Nunjucks：

npm install nunjucks

安装后通过require引入：

const nunjucks = require('nunjucks');

如需使用文件监视功能，需额外安装Chokidar：

npm install nunjucks chokidar

Nunjucks支持所有现代浏览器和Node.js的当前维护版本。

浏览器环境使用

浏览器端提供两种版本选择：

完整版(nunjucks.js)：
- 包含完整编译器
- 支持动态加载模板
- 支持模板热更新
- 体积较大(约20KB压缩后)
精简版(nunjucks-slim.js)：
- 仅支持预编译模板
- 体积更小(约8KB压缩后)
- 适合生产环境使用

引入方式：

<script src="/path/to/nunjucks.js"></script>

或作为AMD模块加载：

define(['nunjucks'], function(nunjucks) {
  // 使用nunjucks
});

基础使用教程

1. 基本配置

首先需要进行基础配置：

nunjucks.configure({ 
  autoescape: true  // 自动转义HTML，防止跨站脚本
});

2. 字符串渲染

最简单的模板渲染方式：

const result = nunjucks.renderString('Hello {{ username }}', { 
  username: 'James' 
});
// 输出: Hello James

3. 文件模板渲染

实际项目中更推荐使用文件模板：

// 配置模板目录
nunjucks.configure('views', { autoescape: true });

// 渲染模板文件
const output = nunjucks.render('index.html', { 
  title: '首页', 
  items: ['项目1', '项目2'] 
});

4. Express集成

在Express框架中可以无缝集成：

const express = require('express');
const app = express();

nunjucks.configure('views', {
  autoescape: true,
  express: app  // 集成到Express
});

app.get('/', (req, res) => {
  res.render('index.html', { user: '访客' });
});