Emblem 是一个基于 Handlebars 的模板语言，它可以在 HTML 标记中直接使用类似 Ruby 和 Haml 的简便标记。而 emblem-loader 是一个用于在 webpack 中加载 Emblem 模板的 npm 包。在前端开发过程中，我们常常需要使用各种模板引擎进行前端渲染，在这篇文章中，我们将介绍如何使用 emblem-loader 加载 Emblem 模板。
安装
我们可以通过 npm 进行安装：
npm install emblem-loader --save-dev
配置
在 webpack 配置文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ------------
---- -
-
------- ---------------
-
-
-
-
-
-- ---
-使用
现在我们就可以在项目中使用 .emblem 文件了，webpack 将通过 emblem-loader 将其编译成端口的模板。
在 HTML 文件中使用模板：
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ------ ------------ ------- ------ ---- ----- --- ---- --------------- ---- ------- ---------- -- --- ------- ---------------------------- ------- -------
在 JavaScript 文件中引入模板，可以使用 require 或 import ：
// app.js
const template = require('./template.emblem');
document.getElementById('app').innerHTML = template({ title: 'Emblem Loader Demo' });// app.js (使用 ES6 的 import 语法)
import template from './template.emblem';
document.getElementById('app').innerHTML = template({ title: 'Emblem Loader Demo' });上面的代码中的 template.emblem 就是我们在 HTML 文件中定义的模板，通过 require 或 import 引入，然后再传入数据渲染到页面中。
示例
下面是一个简单的使用示例：
模板文件
div.container h1.title = title
JavaScript 文件
// app.js
import template from './template.emblem';
document.getElementById('app').innerHTML = template({ title: 'Emblem Loader Demo' });编译结果
<div class="container"> <h1 class="title">Emblem Loader Demo</h1> </div>
总结
通过 emblem-loader，我们可以方便地在 webpack 中加载和使用 Emblem 模板，希望本文对大家有所帮助，也希望读者在使用过程中发现问题及时反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd1b