使用 Webpack 2 将数据传递给 ejs 部分答案

【问题标题】：Pass data to ejs partials using Webpack 2使用 Webpack 2 将数据传递给 ejs 部分
【发布时间】：2018-04-04 17:49:34
【问题描述】：

我正在使用 Webpack 2 和 ejs-template-loader 我可以为我的页面获取数据，但是我需要将部分数据传递给一个部分数据。

<% 
var data = htmlWebpackPlugin.options.data;
var carouselElement = data.carouselElement;
if (data) {  %>
<!-- Header -->
<%- include ../../components/avalon/header/header.ejs %>
    <div class="page-mask">
        <div class="main-content <%= carouselElement%>">
            <%- include ../../components/hero.image/hero.image.ejs %>
            <%- include ../../components/content.carousel/content.carousel.ejs {carouselElement} %>
            <%- include ../../components/experiences/experiences.ejs %>
        </div>
    </div>
<%}%>

上面的代码给了我这样的错误

ENOENT：没有这样的文件或目录

你知道如何将数据传递给partials吗？

【问题讨论】：

您的路径肯定不正确，您是否也在服务器端设置了布局？
当我使用它工作。我不知道如何将数据传递给部分
看看我的回答:-)

标签： javascript webpack ejs

【解决方案1】：

在 EJS 中使用 include 传递部分数据：

<%- include( '../mypage', { data: "mydata" }); %>

在mypage.ejs显示它

<%= data %> // will show mydata

使用 EJS 加载器，它似乎是这样的：

var mainPage = require("ejs!./mainPage.ejs");
var subPage = require("ejs!./subPage.ejs");

var renderedPage = _.mainPage('<%= mainPage %>', { title: 'data', subPage:subPage  });

<%= renderedPage %>

在mainPage.ejs:

<main>
    <h1><%= title %></h1>
    <%= subPage({ title:'sub page', content: 'This is the subPage' }) %>
</main>

在subPage.ejs:

<div>
    <h2><%= title %></h2>
    <p><%= content %></p>
</div>

别忘了在你的 webpack 配置文件中添加 lodash 插件：

plugins: [
    new webpack.ProvidePlugin({
        _: "underscore"
    })
]

享受吧！

【讨论】：

仍然出现错误。你是否使用 Webpack 2 ejs loader 运行它？