William's Blog

解决webpack中使用ejs-loader时模板嵌套的问题

问题背景

  笔者在项目开发中使用webpack构建前端静态资源,项目中用到了ejs模板并使用ejs-loader进行解析。当笔者使用ejs的include语法在一个ejs模板中引入另一个ejs模板时,webpack一直构建失败。

问题产生原因

  笔者在ejs-loader的README文档中找到了原因:ejs-loader使用lodash库中的template函数编译ejs模板而不是使用标准的ejs模板引擎。由于lodash库中的template函数无法识别ejs的include方法,所以按照笔者的方式进行ejs模板的嵌套不成功。

问题解决方案

  1. 在使用ejs-loader的情况下,以参数的形式将ejs-loader编译后生成的子模板函数传入到父模板函数中,然后在父ejs模板中需要嵌套子模板的地方以<%= childTemplateFunction(data) %>的形式引用子模板函数,这样就可以实现ejs模板的嵌套。示例代码如下:

    const parent = require('./parent.ejs');
    const child = require('./child.ejs');
    const renderHTML = parent({
    child
    });

    parent.ejs:

    <div><%= child({name: 'test'}) %><div>

    child.ejs:

    <p><%= name %></p>

    renderHTML:

    <div><p>test</p></div>
  2. 使用ejs-compiled-loader替换ejs-loader。ejs-compiled-loader使用ejs引擎编译ejs模板,支持ejs的include语法。

William

本博客作者 William 现任职于北京贝壳找房,从事web前端开发相关工作。
您可以通过Email与他取得联系