简体   繁体   English

最简单的 node.js + nunjucks 示例

[英]Simplest possible node.js + nunjucks example

Probably will never use node.js nor Nunjucks for any real development, but now for some reason need:可能永远不会使用 node.js 或 Nunjucks 进行任何实际开发,但现在出于某种原因需要:

  • precompile the some simple templates to javascript with Nunjucks使用 Nunjucks 将一些简单的模板预编译为Nunjucks
  • run the precompiled templates under the node.jsnode.js下运行预编译模板

I have done:我已经做好了:

  • installed node.js and the npm (eg have node and the npm command)安装了node.jsnpm (例如有nodenpm命令)
  • mkdir njtest && cd njtest
  • installed the nunjucks with the npm install nunjucks (got a node_modules/nunjucks directory)使用npm install nunjucks (获得了node_modules/nunjucks目录)
  • mkdir templates
  • in the templates i have created two files index.html and layout.html with the following jinja2/nunjucks content在模板中,我创建了两个文件index.htmllayout.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 %}
  • I precomplied the templates with the我用
./node_modules/nunjucks/bin/precompile templates >templates.js

and in the templates.js I have the precompiled code.templates.js中我有预编译的代码。

What I should to do next to get an running web-server what will use the precompiled template.js ?接下来我应to do来获得一个正在运行的网络服务器什么将使用预编译的template.js

Please, don't search anything advanced behing this question.请不要搜索这个问题的任何高级内容。 This is probably an stupid-simple question for someone who know node and javascript.对于了解节点和 javascript 的人来说,这可能是一个愚蠢的简单问题。

What i know, will need, create a file let says app.js and need run it with the node - but what should contain?我所知道的,将需要,创建一个文件让说app.js并需要与node一起运行它 - 但应该包含什么?

require 'nunjucks';

and probably something like: var res = nunjucks.render('templates.js');可能是这样的: var res = nunjucks.render('templates.js'); and what else?还有什么? (the simplest possible (one time) solution). (最简单的(一次性)解决方案)。 Note: want use Nunjucks server-side and not in the browser.注意:要在服务器端而不是在浏览器中使用 Nunjucks。

Start by initialising your Node application as follows: 首先初始化Node应用程序,如下所示:

cd njtest
npm init

You can hit "Enter" to accept the defaults for most of the questions, if you're doing this after creating app.js then it'll automatically detect this and use it as the entry point for your simple server. 您可以按“Enter”接受大多数问题的默认值,如果您创建app.js 执行此操作那么它将自动检测到并将其用作简单服务器的入口点。

Install Express: 安装Express:

npm install express --save

Then create app.js as follows: 然后按如下方式创建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 ) ;

Now fire up a browser, go to http://localhost:9000 and up pops your page! 现在启动一个浏览器,转到http:// localhost:9000然后弹出你的页面!

Hope that helps... 希望有帮助......

I created simple builder for Nunjucks + SCSS + TypeScript我为 Nunjucks + SCSS + TypeScript 创建了简单的构建器

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

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

npm i samuraijs

Create samurai.js file:创建samurai.js文件:

import {Samurai} from "samuraijs";

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

Add the following lines to your package.json:将以下行添加到您的 package.json:

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

Place your *.njk files at the src/ directory, run将你的 *.njk 文件放在src/目录下,运行

npm run serve

And open localhost:3000并打开localhost:3000

Or npm run build to build the project.或者npm run build来构建项目。

Dont think about build configuration.不要考虑构建配置。 Just code your project!只需编写您的项目!

I hope my builder solves your problem:)我希望我的建造者能解决你的问题:)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM