模板引擎【免费下载链接】nunjucksA powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)项目地址https://gitcode.com/gh_mirrors/nu/nunjucks点击查看免费下载本指南围绕 docs/fr/getting-started.md 的核心内容展开系统讲解 Nunjucks一个受 Jinja2 启发、支持模板继承与异步控制的强大模板引擎在 Node.js 与浏览器两种环境下的安装方式、浏览器端两种构建文件的选型策略以及configure/renderString/render三大核心 API 的实战用法。读完本文你将能够独立完成环境安装、Express 集成与模板渲染的完整配置并掌握浏览器端模板预编译的生产级部署思路。一、在 Node.js 环境中安装与加载Nunjucks 以 npm 包形式发布在 Node.js 环境下安装只需一条命令$ npm install nunjucks安装完成后通过require(nunjucks)即可加载整个库const nunjucks require(nunjucks);版本支持说明Nunjucks 支持 Node.js 基金会官方仍在维护的 Node.js 版本即当前最新的发布版本以及处于维护模式maintenance的版本。这意味着当你使用较新但已停止维护的旧版 Node.js 时应优先升级运行时环境。从仓库源码看nunjucks/index.js 是 npm 包的实际入口它把Environment、Template、FileSystemLoader、WebLoader、PrecompiledLoader以及configure、render、renderString、precompile等全部对外 API 汇集并导出因此require(nunjucks)之后即可直接使用nunjucks.configure()与nunjucks.render()等顶层方法。二、在浏览器环境中使用浏览器端不需要npm install而是直接以script标签引入预构建好的脚本文件。官方提供两套构建产物各有明确的适用场景2.1 两个构建文件的选型文件体积min/gzipped能力适用场景nunjucks.js另有 nunjucks.min.js 压缩版约 20K完整编译器 运行时支持动态加载模板、模板文件变更时自动重新加载、使用预编译模板开发期与起步阶段生产环境在可接受体积的前提下也可使用nunjucks-slim.js另有 nunjucks-slim.min.js 压缩版约 8K仅运行时只能加载和使用预编译模板生产环境首选开发期需搭配 grunt/gulp 任务自动重编译模板选择逻辑非常简单如果你需要浏览器在运行时动态地加载、解析并编译模板比如开发期改模板后刷新页面即可生效就必须选择包含完整编译器的nunjucks.js如果所有模板都已经在构建阶段预编译成 JS那么体积更小、仅含运行时的nunjucks-slim.js就是更优解。这与仓库源码的设计完全吻合nunjucks/index.js 在configure时会根据运行环境自动选择 loader——Node.js 环境使用FileSystemLoader从文件系统读取模板浏览器环境则使用WebLoader通过 HTTP 请求获取模板。而 slim 版本之所以更小是因为它不打包编译链路只保留执行预编译代码所需的运行时部分。2.2 引入方式最简单的方式是通过script标签引入script srcnunjucks.js/script也可以作为 AMD 模块加载define([nunjucks], function(nunjucks) { });2.3 浏览器端的关键提醒生产环境务必预编译无论采用何种方式生产环境请务必预编译模板浏览器端模板若不做预编译每次渲染都要通过 HTTP 拉取模板源码再现场编译性能和稳定性都不可接受。社区提供了 grunt-nunjucks 中浏览器中使用一节。从源码可以印证这套机制浏览器端模板预编译后会以window.nunjucksPrecompiled全局对象的形式注入页面nunjucks/src/environment.js 在初始化环境时会检测window.nunjucksPrecompiled若存在则自动把PrecompiledLoader放到 loader 列表最前面从而优先命中预编译模板。也就是说——只要你在配置环境之前引入了预编译产物浏览器端代码无需任何额外改动即可自动使用它们。三、核心用法configure、renderString 与 render3.1 最简方式renderString 渲染字符串先通过configure设置全局配置例如开启自动转义autoescape再用renderString渲染一段模板字符串nunjucks.configure({ autoescape: true }); nunjucks.renderString(Hello {{ username }}, { username: James });运行结果即Hello James。当autoescape: true时模板中输出的所有变量默认都会被 HTML 转义避免 XSS 注入这是生产环境的推荐默认值事实上 nunjucks/src/environment.js 中autoescape的默认值本身就是true。renderString适合快速验证、动态拼装等场景。仓库测试 tests/api.js 还展示了renderString的进阶用法——它同样支持相对路径解析例如renderString({% extends ./relative/test1.njk %}..., {}, { path: ... })可以在字符串模板中继承/引用指定相对路径下的其他模板。3.2 文件模板configure 指定模板目录 render实际项目中通常不会把模板写死在字符串里而是把每个模板存成独立文件再用render渲染。此时需要把模板目录作为configure的第一个参数告诉 Nunjucksnunjucks.configure(views, { autoescape: true }); nunjucks.render(index.html, { foo: bar });路径语义在 Node.js 中views是相对当前工作目录process.cwd()的路径在浏览器中则是相对 URL生产环境建议写成绝对 URL如/views。为什么要用文件模板只有基于文件系统或 HTTP的模板加载才能支持模板继承{% extends %}与包含{% include %}等核心特性——renderString渲染的纯字符串没有文件上下文无法参与继承链。从源码看模板目录参数最终会传给 loader在 Node.js 中nunjucks/src/node-loaders.js 的FileSystemLoader会把这个目录支持字符串或数组作为搜索路径浏览器端则由 nunjucks/src/web-loaders.js 的WebLoader将其作为 baseURL以baseURL / name的形式发起 HTTP 请求。另外值得注意的是浏览器端的WebLoader默认useCache: falseHTTP 无法监视文件变化每次请求都会重新下载并编译这也是官方反复强调生产环境务必预编译的原因之一。3.3 Express 集成把 app 交给 configure如果正在使用 Express直接把 Express 实例传给configure的express选项即可无缝接入res.rendervar app express(); nunjucks.configure(views, { autoescape: true, express: app }); app.get(/, function(req, res) { res.render(index.html); });完成上述配置后Express 的路由处理器里就能直接使用res.render(index.html)渲染 Nunjucks 模板与原生 Express 视图渲染的写法完全一致。仓库还提供了完整可运行的示例参见 samples/express/js/app.js其中展示的正是nunjucks.configure(views, { autoescape: true })的标准初始化写法。这套集成的底层机制非常清晰nunjucks/index.js 在configure检测到opts.express后调用e.express(app)最终由 nunjucks/src/express-app.js 完成两件事其一定义NunjucksView视图类并调用app.set(view, NunjucksView)让 Express 用 Nunjucks 渲染视图其二调用app.set(nunjucksEnv, env)把环境实例挂到 app 上方便后续通过app.get(nunjucksEnv)取用。NunjucksView.prototype.render内部即调用env.render(name, opts, cb)将 Express 传入的渲染上下文原样交给 Nunjucks 环境。3.4 Node 与浏览器的统一 API上述configure/renderString/renderAPI 在 Node.js 和浏览器中完全一致Express 集成当然仅限 Node.js。差异只体现在模板来源Node.js 默认从文件系统加载模板浏览器默认通过 HTTP 加载。关键在于只要在浏览器中引入了预编译产物同一套代码无需任何改动即可在开发动态加载与生产预编译两种模式间无缝切换——正如上文提到的nunjucks/src/environment.js 会自动检测window.nunjucksPrecompiled并优先使用预编译模板。这大大降低了环境迁移成本。四、环境内部机制速览configure 做了什么为了更深刻地理解上述用法这里从源码层面梳理nunjucks.configure()的完整调用链对应 nunjucks/index.js参数归一化若第一个参数是对象如configure({ autoescape: true })则将其整体视为配置项opts模板路径置空。选择 loaderNode 环境构造FileSystemLoader(templatesPath, { watch, noCache })浏览器环境构造WebLoader(templatesPath, { useCache, async })。创建环境new Environment(TemplateLoader, opts)在 nunjucks/src/environment.js 中初始化autoescape默认 true、throwOnUndefined默认 false开启后输出 null/undefined 会抛错、trimBlocks、lstripBlocks等配置并注册内置过滤器filters与测试器tests。挂接 Express若提供了express选项调用e.express(app)完成视图引擎注册。返回环境实例configure返回创建好的Environment同时 nunjucks 模块内部保存单例e供后续render/renderString顶层调用复用。值得留意的配置项还有watch与noCache前者开启后 nunjucks/src/node-loaders.js 会使用 chokidar 监视模板目录模板文件变更时发出update事件并自动使缓存失效适合开发期热更新后者则关闭模板缓存每次渲染都重新从磁盘读取。五、进阶方向以上只是 Nunjucks 能力的冰山一角。继续深入可以查阅仓库中的两份核心文档docs/fr/api.md完整的 API 参考涵盖Environment、各种 Loader、预编译precompile命令行工具以及过滤器/扩展注册等细节docs/fr/templating.md模板语言参考包括变量、过滤器、控制流、宏、继承、异步控制等全部语法。仓库中对应的源码与测试也可作为研读素材nunjucks/src 目录下的environment.js、compiler.js、parser.js、lexer.js、filters.js等构成完整实现链路tests 目录下的 tests/api.js、tests/express.js、tests/loader.js 等测试文件则提供了大量可复用的 API 调用范例能帮助你快速验证各类配置行为。赞分享模板引擎【免费下载链接】nunjucksA powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)项目地址https://gitcode.com/gh_mirrors/nu/nunjucks点击查看免费下载相关推荐Nunjucks 快速上手从 Node、浏览器到 Express 的安装、配置与渲染实战Nunjucks 快速上手从 Node、浏览器到 Express 的安装、配置与渲染实战 导读 本文以 Nunjucks 官方《Getting Started模板引擎Nunjucks 快速上手Node 与浏览器双端安装、配置与渲染实战指南Nunjucks 快速上手Node 与浏览器双端安装、配置与渲染实战指南 本篇技术指南以 Nunjucks 官方中文文档《快速上手》 docs/cn/get模板引擎微信聊天记录导出完整教程三步用留痕WeChatMsg永久保存你的对话微信聊天记录导出完整教程三步用留痕WeChatMsg永久保存你的对话 先把答案放在最前面WeChatMsg中文名留痕是一款开源的微信聊天记录导出上一篇JianDan项目常见问题排查新手开发者必知的10个调试技巧下一篇大模型服务化部署完整指南PaddleNLP Triton 镜像一键部署快速接入 OpenAI 兼容 API创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考