前言
在前端开发中，我们常常会遇到需要在网页上动态渲染 HTML 的需求。为了方便地完成这一操作，开源社区中涌现出很多优秀的模板引擎，如 Handlebars、EJS、Jade 等。在使用这些引擎的时候，需要把模板和数据传递给引擎，让引擎将其渲染成 HTML，然后再插入 DOM 中。而在打包时，我们需要将这些模板也打包进来，并且希望能够动态引入不同的模板文件。
这时候，rollup-plugin-handlebars 就能够派上用场了。rollup-plugin-handlebars 是一个将 Handlebars 模板编译为 JavaScript 函数，并能够让我们在打包时动态引入模板文件的 Rollup 插件。本文将详细介绍 rollup-plugin-handlebars 的安装和使用方法。
步骤
第一步：安装
在使用 rollup-plugin-handlebars 之前，需要在项目中安装它。执行以下命令即可：
npm install rollup-plugin-handlebars --save-dev
第二步：配置
在完成安装之后，我们需要在 Rollup 配置文件中引入该插件，并进行相应的配置。先是一个简单的 Rollup 配置文件的例子：
-- -------------------- ---- -------
------ ---------- ---- ---------------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
------------
-
--在这个配置文件中，我们使用了 rollup-plugin-handlebars 并调用它，然后把它加入到 plugins 数组中。此时使用的是默认配置，即：
{
id: ['*.handlebars', '*.hbs'],
handlebars: {}
}id 的值指定了 rollup-plugin-handlebars 会去处理哪些文件，handlebars 对象可以传递 Handlebars 的配置。
当然，如果你想对它进行更多的配置，可以传递一个包含参数的对象，来实现自定义行为。下面是一份更为详细的配置文件：
-- -------------------- ---- -------
------ ---------- ---- ---------------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
------------
---------------- -
----------------- -----
--
-------- -----------
-------- ---------------------
----------- -
----------------- ------
-------- ------------------------------
----- -----------------
--
---
- ----------- --- ------ ----------------- ----- --- -------- --
- -------- ------ --- ---- ---- - ------- -------
- --- --------------------------------------------------
- --- --------- --- ------- -- -------- ----- ---- - ------- ------
- --- --- -------- ---- ------ ---- - ------- ------ --- ---- --
- -------- -- ---- ------- ------ ----------
--
-------------------- -------- -- -
----- - ----- ------ - - -------
-- -------------------------------- -
----- -------------- - -------------------
----- --------- - ----------------------------------------------- -- -----------
----- - ----- ---------- - - ------------------------------ ------------------------------------------------- ------
----------------- -- ---------
----------- ------ ---- -- ----- - ---------- - --
--------------- -- -
----- --------- - ----------------------------- ----------------------- ----
----- ----- - -------------------------
----- --- - ------------------- -----------------
------------------- -----------------
------ -
----------
------
---
--
--
----------
------------- - ---------- ------ --- -- -- ---- -- -
----- ---- - -------------------------
----- ------ - -------------------------------------- --------------------------------
------ ------------ ------ - ------ - --------------- - ------------
-- --------
------------- - -----------
-
-
--
-
--该配置文件等价于以下配置：
-- -------------------- ---- -------
------------
--- ----- ----- -------- --
-------- -----------
--- -- -------------- --- --
-------- ---------------------
---
- -- ---------- --------------------
- ----- ---------- ----------
--
---------------- -
----------------- -----
--
---
- -- ---------- --------- --------- -----------------------------
- --------------------------------
--
----------- -
----------------- ------
-------- ------------------------------
--- --------- ----------------- ----- --
----- -----------------
--
---
- --------------
- -------------------
--
-------------------- -------- -- -
----- - ----- ------ - - -------
-- -------------------------------- -
----- -------------- - -------------------
----- --------- - ----------------------------------------------- -- -----------
----- - ----- ---------- - - ------------------------------ ------------------------------------------------- ------
----------------- -- ---------
----------- ------ ---- -- ----- - ---------- - --
--------------- -- -
----- --------- - ----------------------------- ----------------------- ----
----- ----- - -------------------------
----- --- - ------------------- -----------------
------------------- -----------------
------ -
----------
------
---
--
--
----------
------------- - ---------- ------ --- -- -- ---- -- -
----- ---- - -------------------------
----- ------ - -------------------------------------- --------------------------------
------ ------------ ------ - ------ - --------------- - ------------
-- --------
------------- - -----------
-
-
--在这个配置文件中，我们将所有后缀为 .hb 的文件包含进来，并将 Handlebars 的默认配置修改成了比较灵活的配置。
第三步：使用
现在，我们就可以在代码中引入 Handlebars 模板了。以下是一个简单的例子：
import template from './template.hb';
const data = {name: 'world'};
const html = template(data);
document.body.innerHTML = html;这里我们要注意的是，在不同的模板引擎中，模板和数据的渲染方式可能是不同的。对于 Handlebars 引擎，我们需要把模板和数据传递给 Handlebars 函数，然后 Handlebars 函数会将它们编译成 HTML 字符串。在渲染之前，Handlebars 函数还可以注册一些帮助函数，以方便模板的编写。
总结
在本文中，我们介绍了 rollup-plugin-handlebars 的安装和使用方法，并对其进行了详细的配置。我们还讨论了在使用 Handlebars 引擎中需要注意的一些细节。rollup-plugin-handlebars 在打包时可以方便地引入模板文件，并将其编译成 JavaScript 函数，使得我们在浏览器中可以方便地进行模板渲染。通过学习和使用 rollup-plugin-handlebars，我们可以更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61929