在模板中使用动态变量将 nunjucks 与 htmlWebpackPlugin 结合使用

Question

I'm searching a way of using Nunjucks with the htmlWebpackPlugin to generate some html files on webpack compiling.我正在寻找一种使用 Nunjucks 和 htmlWebpackPlugin 在 webpack 编译时生成一些 html 文件的方法。

What I achieved so far到目前为止我取得的成就

I managed to actually generate HTML from nunjucks template files through the nunjucks-html-loader but looking a bit closer to the code of said loader, the render method is called without sending vars to the templates.我设法通过nunjucks-html-loader从 nunjucks 模板文件中实际生成了 HTML，但看起来更接近于所述加载器的代码，render 方法被调用而不向模板发送变量。

So, for now with the following plugin config, I generate HTML without dynamically inserted vars所以，现在使用以下插件配置，我生成了没有动态插入变量的 HTML

new HtmlWebpackPlugin({
  filename: path.join(__dirname, '/' + page.filename),
  template: 'nunjucks-html-loader!assets/templates/' + page.name + '.njk'
})

What I tried我试过的

For a testing purpose, I tried some changes on the node_module itself (I know, I know...) and changed出于测试目的，我尝试对 node_module 本身进行一些更改（我知道，我知道...）并更改

html = template.render(nunjucksContext);

into进入

html = template.render(nunjucksContext, { globals: global.globals });

Trying to define global.globals in my webpack.config.js file but this crashes with the following error试图在我的webpack.config.js文件中定义global.globals但这会因以下错误而崩溃

ERROR in Error: Child compilation failed: Module build failed: TypeError: parentFrame.push is not a function

which is beyond my comprehension.这超出了我的理解。

What I want我想要的是

Is to use an extendable template engine like nunjucks which allows me to structure my templates like the following是使用像 nunjucks 这样的可扩展模板引擎，它允许我像下面这样构建我的模板

<html>
<!-- layout structure inherited from every template -->
</html>

Every page I make extends the layout and only overrides some blocks我制作的每个页面都扩展了布局并且只覆盖了一些块

What I try to avoid我试图避免的

Partials like for exemple部分喜欢例如

header file :头文件：

<html>
<!-- header layout -->

footer file页脚文件

<!-- footer layout -->
</html>

Every page I make includes partials我制作的每一页都包含部分

So my question is : Is it even possible tu use a template engine supporting inheritance like nunjucks with the htmlWebpackPlugin or is it mandatory to use another one like ejs for exemple and chunking the layout into partials which I do not like?所以我的问题是：你是否有可能使用支持继承的模板引擎，比如带有 htmlWebpackPlugin 的 nunjucks，或者是否必须使用另一个像 ejs 这样的模板引擎，并将布局分块成我不喜欢的部分？

Answer 1

Alright, so I found a workaround here with the nunjucks-isomorphic-loader which seems not super supported but still.好的，所以我在这里找到了一个使用nunjucks-isomorphic-loader的解决方法，它似乎不受超级支持，但仍然支持。 It works for now !它现在有效！

Here's my webPack config这是我的 webPack 配置

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const DEV_ENV = process.env.NODE_ENV === 'dev'

const wpConfig = {
  entry: './assets/js/app.js',

  output: {
    path: path.resolve('./dist/js'),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      // Javascript
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },

      // Nunjucks - HTML
      {
        test: /\.njk$/,
        use: [
          {
            loader: 'nunjucks-isomorphic-loader',
            query: {
              root: [path.resolve(__dirname, 'assets/templates')]
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      DEV_ENV: DEV_ENV
    }),

    new HtmlWebpackPlugin({
      myOptions: { foo: 'bar' },
      filename: path.join(__dirname, '/' + page.filename),
      template: 'assets/templates/index.njk'
    })
  ]
}

module.exports = wpConfig

having the following templates有以下模板

_layout.njk

{% set vars = htmlWebpackPlugin.options.myOptions %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ vars.foo }}</title>
  </head>
  <body>
    <header>
    {% block header %}
      <h1 class="header-logo">
        <a href="#">{{ vars.foo }}</a><!-- Outputs bar -->
      </h1>
    {% endblock %}
    </header>

    {% block content %}

    {% endblock %}
  </body>
</html>

index.njk

{% extends "_layout.njk" %}

{% block content %}
here's the content of my `foo` var: {{ vars.foo }}
{% endblock %}

Answer 2

我写了simple-nunjucks-loader ，它比其他解决方案有一些优势，比如只跟踪所需的依赖项和html-webpack-plugin支持。

在模板中使用动态变量将 nunjucks 与 htmlWebpackPlugin 结合使用

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-11-17 09:30:18

解决方案2
1 2019-12-18 04:34:25

在模板中使用动态变量将 nunjucks 与 htmlWebpackPlugin 结合使用

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-11-17 09:30:18

解决方案2 1 2019-12-18 04:34:25

解决方案1
4 已采纳 2017-11-17 09:30:18

解决方案2
1 2019-12-18 04:34:25