前言
在前端开发中，我们常常需要将CSS与JavaScript打包并引入到HTML中。而rollup-plugin-bundle-html可以为我们提供这样的便利。本篇文章将会详细介绍如何使用该npm包，并附上示例代码。
安装
安装该npm包，可以通过以下命令进行安装：
npm install rollup-plugin-bundle-html --save-dev
配置
配置该npm包，需要在rollup.config.js文件中进行配置，示例代码如下：
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
-------------
--
--这只是 rollup.config.js 文件的一部分，其他部分的配置在此略去。
选项
通过设置选项，我们可以根据我们的需求来自定义生成的 HTML 文件。以下是该 npm 包的选项列表：
| 选项 | 描述 |
|---|---|
template |
可以使用基本模板填充之前提到的 placeholder（占位符），默认值为：'<!doctype html><html><head><meta charset="UTF-8"><title><% if(htmlTitle) { %><%= htmlTitle %><% } else { %><%= bundleName %><% } %></title></head><body><% if(htmlBody) { %><%= htmlBody %><% } %><script src="<%= bundleName %>"></script></body></html>'。 |
dest |
生成的 HTML 文件的名称和路径，默认值为：'index.html'。 |
inject |
是否自动插入文件和数据到 HTML，可选值：true和false，默认值为：true。 |
include |
是包含要注入的 JavaScript 和 CSS 文件的数组，默认值为：[]，因为通常我们选择使用CDN来引用这些文件。 |
exclude |
是要排除的文件数组，默认值为：[]。要排除的文件是自动通过配置文件根据文件扩展名进行解析的 |
title |
HTML 文件标题，默认值为：null。 |
publicPath |
通过此属性可以指定一组或多组要注入的 CSS 或 JavaScript 文件的基础路径，可以是选项字符串或函数。此参数适用于涉及 JavaScript 和 CSS 的所有选项。默认为空 |
示例
下面的示例演示如何使用rollup-plugin-bundle-html通过设置选项来自定义生成的 HTML 文件：
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
------------
----- -------------------
------- ------
------ --- ------ -------
-------- ------------------- -------------------
---
--
--结束语
正如你在本文中所看到的，rollup-plugin-bundle-html是一个很方便的 npm 包，可以帮助我们快速生成打包后的HTML文件。在实际的前端开发过程中，我们可以根据具体的业务需求进行相应的配置，以生成符合自身需求的 HTML 文件。
代码示例：https://github.com/rjseo/rollup-plugin-bundle-html-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc97b5cbfe1ea0611a2e