在前端开发中，我们经常需要在页面中渲染动态数据。underscore-template-loader是一个非常方便的npm包，它可以帮助我们在Webpack中加载和编译Underscore模板文件。
安装
首先，我们需要在项目中安装underscore-template-loader：
npm install underscore-template-loader --save-dev
同时，还需要安装underscore和webpack。
配置
接下来，我们需要在Webpack配置文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
------- ----------------------------
-
-
-
--这里的test属性表示只有文件名以.tpl.html结尾的文件才会被underscore-template-loader加载和编译。如果你使用的是其他的模板引擎，也可以根据需要来修改正则表达式。
使用
在页面中，我们可以使用如下代码来加载和渲染模板：
import template from './template.tpl.html';
const data = { name: 'ChatGPT', age: 2 };
const rendered = template(data);
console.log(rendered); // 输出渲染后的HTML字符串这里的template变量其实就是underscore-template-loader编译后的函数。我们可以将动态数据作为参数传递给该函数，从而得到渲染后的HTML字符串。
示例代码
下面是一个简单的示例代码，展示了如何使用underscore-template-loader来渲染一个名字和年龄的列表。
HTML模板文件template.tpl.html：
<ul>
<% _.forEach(users, function(user) { %>
<li><%= user.name %>（<%= user.age %>岁）</li>
<% }); %>
</ul>JavaScript文件app.js：
-- -------------------- ---- ------- ------ - ---- ------------- ------ -------- ---- ---------------------- ----- ----- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- - -- ----- -------- - ---------- ------ ----- --- ----------------------- - ---------
在浏览器中打开页面，你将看到如下结果：
- Alice（21岁）
- Bob（22岁）
- Charlie（23岁）
总结
通过本教程，我们学习了如何使用underscore-template-loader来加载和编译Underscore模板文件，并通过一个简单的示例代码演示了如何渲染动态数据。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47356