最简单的 node.js + nunjucks 示例答案

【问题标题】：Simplest possible node.js + nunjucks example最简单的 node.js + nunjucks 示例
【发布时间】：2021-10-04 02:45:49
【问题描述】：

可能永远不会使用 node.js 或 Nunjucks 进行任何真正的开发，但现在出于某种原因需要：

使用Nunjucks将一些简单的模板预编译为javascript
运行node.js下的预编译模板

我已经完成了：

安装了node.js和npm（例如有node和npm命令）
mkdir njtest && cd njtest
用npm install nunjucks 安装了nunjucks（得到了node_modules/nunjucks 目录）
mkdir templates
在模板中，我创建了两个文件 index.html 和 layout.html，内容如下：jinja2/nunjucks
layout.html

<!doctype html>
<head>
        <title>simple example</title>
</head>
<body>
        <h1>Simple example</h1>
        {% block body %}{% endblock %}
</body>

index.html

{% extends "layout.html" %}

{% block body %}
hello world
{% endblock %}

我使用

./node_modules/nunjucks/bin/precompile templates >templates.js

在templates.js 我有预编译的代码。

接下来我应该to do 来获得一个正在运行的网络服务器什么将使用预编译的template.js？

请不要搜索任何关于这个问题的高级内容。对于了解 node 和 javascript 的人来说，这可能是一个愚蠢的简单问题。

我知道，将需要，创建一个文件让说 app.js 并需要使用 node 运行它 - 但应该包含什么？

require 'nunjucks';

可能是这样的：var res = nunjucks.render('templates.js'); 还有什么？（最简单的（一次性）解决方案）。注意：希望在服务器端使用 Nunjucks，而不是在浏览器中。

【问题讨论】：

标签： node.js nunjucks

【解决方案1】：

首先初始化您的 Node 应用程序，如下所示：

cd njtest
npm init

您可以点击“Enter”以接受大多数问题的默认设置，如果您在创建 app.js 之后执行此操作，那么它会自动检测到并将其用作条目指向您的简单服务器。

安装 Express：

npm install express --save

然后创建app.js如下：

var express     = require( 'express' ),
    app         = express(),
    nunjucks    = require( 'nunjucks' ) ;

// Define port to run server on
var port = process.env.PORT || 9000 ;

// Configure Nunjucks
var _templates = process.env.NODE_PATH ? process.env.NODE_PATH + '/templates' : 'templates' ;
nunjucks.configure( _templates, {
    autoescape: true,
    cache: false,
    express: app
} ) ;
// Set Nunjucks as rendering engine for pages with .html suffix
app.engine( 'html', nunjucks.render ) ;
app.set( 'view engine', 'html' ) ;

// Respond to all GET requests by rendering relevant page using Nunjucks
app.get( '/:page', function( req, res ) {
    res.render( req.params.page ) ;
} ) ;

// Start server
app.listen( port ) ;
console.log( 'Listening on port %s...', port ) ;

现在启动浏览器，转到http://localhost:9000，然后弹出您的页面！

希望对您有所帮助...

【讨论】：

对于那些真正新的小补充，如果你还没有在全球范围内安装它，还需要npm install nunjucks --save。

【解决方案2】：

我为 Nunjucks + SCSS + TypeScript 创建了简单的构建器

文档：https://github.com/Artik-Man/SamuraiJS

NPM：https://www.npmjs.com/package/samuraijs

npm i samuraijs

创建samurai.js 文件：

import {Samurai} from "samuraijs";

new Samurai({
    paths: {
        source: 'src',
        destination: 'dist'
    }
});

将以下行添加到您的 package.json：

{
  "scripts": {
    "serve": "node samurai.js --serve",
    "build": "node samurai.js --build"
  },
  "type": "module"
}

将您的 *.njk 文件放在 src/ 目录中，运行

npm run serve

然后打开localhost:3000

或npm run build 构建项目。

不要考虑构建配置。只需编写您的项目！

希望我的建筑商能解决你的问题:)

【讨论】：