前言
随着 Web 技术的发展，越来越多的人开始关注前端开发，而 npm 是前端开发中必不可少的一个工具（下文中的 npm 即指代 Node Package Manager）。通过 npm 我们可以下载各种各样的前端类库，使得我们能够更加高效地完成开发任务。
在 npm 库中，makestatic-parse-html 是一个十分实用的工具库，其功能主要是将 HTML 模板文件转化为可在网页中展示的静态文件。下面将为大家详细介绍 makestatic-parse-html 的使用方法和注意事项。
makestatic-parse-html 的安装
使用 npm 的作用就是方便我们安装引入第三方库，makestatic-parse-html 也不例外。
要使用 makestatic-parse-html，我们需要先安装：
npm install makestatic-parse-html --save
安装后，我们便可以在项目中引用该库。
const makeStaticHTML = require('makestatic-parse-html');makestatic-parse-html 的使用
在介绍具体的使用方法前，我们先来了解一下 makestatic-parse-html 是干什么的。简单来说，它可以把一个 HTML 模板文件转化为一个目标文件（比如 HTML 文件）。
在使用时，我们需要将一个 HTML 模板文件传递给 makeStaticHTML 函数，并指定目标文件（这里假设目标文件为 output.html）：
const makeStaticHTML = require('makestatic-parse-html');
makeStaticHTML({
source: 'input.html',
target: 'output.html'
});这里的 source 参数指代你想要转化的 HTML 模板文件，target 参数指代转化后的输出文件。注意，在这里 input.html 和 output.html 都需要提前创建好。
makestatic-parse-html 更多配置
除了指定 source 和 target 外，makeStaticHTML 函数还有更多可选的配置参数：
-- -------------------- ---- -------
----- -------------- - ---------------------------------
----------------
------- -------------
------- --------------
------- -------------- -- ----------------------
----- - -- --- ---- -----
------ ----- -------
-------- ----- --------
--
--------- - -- ---- ------ ------------ --------------- ----------------
------- ------------- -- -----------------
------- ------------- -- ----------------
--
-------- - -- ----- ---- ------ -------------- ------------
--------------- ---------- -- -------- ------------
--------------- -------- -- ------- -------- ---------
--
------- ----- -- ---- ---- ------------- ---- -----
--------- ---- -- ----------------- ----
---这里的 layout 参数指定了用于生成 HTML 页面的布局文件。如果您希望生成的 HTML 页面中套用某种布局，则可以指定 layout 参数并提供布局文件的路径。
data 参数用于传递数据给 HTML 模板。这些数据将会在模板文件中使用。
partials 参数是一个字典对象。你可以在模板文件中使用 {>partialName} 标签引入该字典对象中的 partials。例如，如果 partials 中包含一个名为 header 的 template，那么在 HTML 模板文件中使用 {>header} 标签，就会导入这个 partials。
replace 参数是另外一种方便重载 HTML 页面的方法。当探测到 searchText 出现在 HTML 页面中时，会将该处内容替换为 replaceText。
最后，minify 和 beautify 分别用于选择压缩或美化输出的 HTML 文件。
示例
下面展示一份使用 makestatic-parse-html 的示例代码。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----------------------
---------
-------
------
------
---------
-------
---------
-------
--------- -------------------- ---- ------- ---- ----------- --- --------- ----- ------ ------ ---------------------- ------- ------ --------- --------------- --------- ------- -------
-- -------------------- ---- -------
-- --------
----- -------------- - ---------------------------------
----------------
------- -------------
------- --------------
------- --------------
----- -
------ ----- -------
-------- -------- -- ---- ------------
--
--------- -
------- ------------- -- -----------------
------- ------------- -- ----------------
--
-------- -
-------------- --- ---- -------
---------------- ---------- -- -- ---- --------------
--
--------- ----
---这个示例代码中，我们通过 makestatic-parse-html 将输入文件 input.html 转化为输出文件 output.html。在 makeStaticHTML 函数中，我们指定了布局文件 layout.html，传递给 HTML 文件的数据，HTML 文件中使用的 partials，以及要替换的内容。
当我们运行这个代码时，在输出文件夹中就可以看见转化后的 HTML 文件 output.html。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8efd