解决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模板中需要嵌套子模板的地方以<%= childTemplateFuction(data) %>的形式引用子模板函数,这样就可以实现ejs模板的嵌套。示例代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const parent = require('./parent.ejs');
    const child = require('./child.ejs');
    const renderHTML = parent({
    child: 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语法。