介绍
@innersource.soprasteria.com/underscore-template-loader 是一个用于 Webpack 的模板加载器，用于编译 Underscore 模板。通过使用这个加载器，您可以在前端项目中方便地使用模板引擎渲染页面。
安装
要安装 @innersource.soprasteria.com/underscore-template-loader，只需在项目目录下运行以下命令即可：
npm install @innersource.soprasteria.com/underscore-template-loader --save-dev
使用
在您的 Webpack 配置文件中，添加以下规则：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------------
---- -
-
------- ----------------------------------------------------------
-------- -
-- ----------
--
--
--
--
--
--这个规则将会匹配所有以 .tpl.html 结尾的文件，并使用 @innersource.soprasteria.com/underscore-template-loader 进行编译。
在您的代码中，您可以通过 import 或 require 来加载这个模板：
import template from './template.tpl.html';
// 渲染模板
const html = template({ name: 'world' });
console.log(html);选项
@innersource.soprasteria.com/underscore-template-loader 提供了以下选项：
evaluate: 设置模板中的<% ... %>代码块的处理方式，默认为_.templateSettings.evaluate。interpolate: 设置模板中的<%= ... %>代码块的处理方式，默认为_.templateSettings.interpolate。escape: 设置模板中的<%- ... %>代码块的处理方式，默认为_.templateSettings.escape。
这些选项与 Underscore 中的 _.templateSettings 相对应。您可以在这里了解更多有关 _.templateSettings 的信息：http://underscorejs.org/#template。
示例
下面是一个简单的示例，展示了如何在您的项目中使用 @innersource.soprasteria.com/underscore-template-loader。
首先，假设您有一个 template.tpl.html 文件，内容如下：
<div>Hello, <%= name %>!</div>
然后，在您的代码中，您可以使用以下方式来加载和渲染这个模板：
import template from './template.tpl.html';
const html = template({ name: 'world' });
console.log(html);
// 输出: <div>Hello, world!</div>结论
@innersource.soprasteria.com/underscore-template-loader 是一个用于编译 Underscore 模板的 Webpack 加载器。通过使用这个加载器，您可以在前端项目中方便地使用模板引擎渲染页面。希望这个使用教程对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac668ae