前言
在前端开发中，页面中的代码量逐渐增大，为了提高代码的复用性和可读性，引入静态文件（如头部、底部）是一个不错的选择。在这里，我们将会介绍如何使用 posthtml-include 这个 npm 包进行静态文件的引入。
posthtml-include 介绍
posthtml-include 是一个 posthtml 插件，用于将引入的文件插入到 HTML 文件中。它支持不仅仅是 HTML 文件，不一定是 script, style 文件恐怖引入，也可以是模板文件，json 文件等等，极其灵活。
安装使用
你可以使用 npm 安装该插件
npm install posthtml-include --save-dev
示例代码
我们来看一个最简单的示例，假设我们有一个 index.html 文件，index.html 引用了一个 head.html 和 footer.html，每个文件独立为一文件。
-- -------------------- ---- -------
---- ---------- ---
------
------
-----------------------
---- -------------------------- ---
-------
------
-------- ---------------------
---- ---------------------------- ---
-------
-------
---- --------- ---
----- ----------------
----- ---------------------------- ------------------ ----------------
---- --- ---
----- ---------------- -------------------- --
----- ---------------- -------------------- --
---- -- ---
------- --------------------------------
---- ----------- ---
--------
--------- --------- --------------------
---------
但是在浏览器打开 index.html 所显示的只有自己的 body 的内容，head 和 footer 没有使用过去，接下来我们就应该如何来使用 posthtml-include 进行静态文件的引入呢？
-- -------------------- ---- -------
----- -------- - --------------------
----- ------- - ----------------------------
------------------------- ----- ----- -- -
-- ----- ----- ----
-------------------
--------- -------
----- ----------
----
--------------
------------ -- -
-------------------------
---
---
上面的代码引入了 posthtml-include 并用它来把 index.html 处理一遍。在 include 函数中需要传递的两个参数：
encoding：文件编码，这里我们使用 UTF-8。root：文件路径，暂定为__dirname，也可自定义文件路径。
结语
通过本文的介绍，相信大家已经了解了 posthtml-include 如何引入静态文件，让我们的代码更加简洁和易维护。同时，也可以发现，posthtml-include 并不只是用来引入 HTML 文件，它支持引入各种文本类文件，对于前端开发是非常有帮助的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63847