前端开发中，我们通常需要使用一些工具来处理代码打包、压缩等操作。其中，Rollup 是一款 JavaScript 模块打包器，支持 ES6 模块化语法，并且可以生成纯净、体积更小的代码。而 rollup-plugin-fill-html 则是 Rollup 的一个插件，可以将 JS 和 CSS 文件注入到 HTML 文件中。
本篇文章将详细介绍 rollup-plugin-fill-html 的使用方法，包括安装、配置和实际使用。
安装
安装 rollup-plugin-fill-html 可以使用 npm 命令：
npm install --save-dev rollup-plugin-fill-html
配置
在 Rollup 的配置文件中，需要引入 rollup-plugin-fill-html 并将其添加为插件。以下是一个示例配置文件：
-- -------------------- ---- ------- ------ - ------ - ---- --------- ------ -------- ---- -------------------------- -------- ------ --------------- -------- - ---------- --------- ----------------- --------- ------------- -- ----- -- - -------------- -- - -------------- ------- ----- ----- ---------------- --- ---展开代码
在这个配置中，fillHTML 插件被添加到了 plugins 数组中，template 属性指定了 HTML 模板文件的路径，filename 属性指定了生成的 HTML 文件名。除此之外，还可以配置其他属性，例如 title、description、keywords 等。
使用
当配置好 rollup-plugin-fill-html 后，在生成 Rollup 打包文件的同时也会自动将 JS 和 CSS 文件注入到指定的 HTML 模板文本中，生成最终的 HTML 文件。
以下是一个示例 HTML 模板文件，假设其路径为 src/index.html：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ----- ---------------- ----------------- ------- ------ ---- --------------- ------- ------------------------- ------- -------展开代码
在执行 Rollup 命令后，会生成 dist/index.html 文件，其中的 CSS 和 JS 文件链接已经被替换为实际生成的文件链接。例如：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ----- ---------------- -------------------------- ------- ------ ---- --------------- ------- ---------------------------------- ------- -------展开代码
到此为止，我们已经成功使用了 rollup-plugin-fill-html。
总结
rollup-plugin-fill-html 可以帮助我们更简单地生成含有注入 JS 和 CSS 文件链接的 HTML 文件。通过本文的介绍，相信大家已经掌握了如何配置和使用这个插件的技巧。建议在开发过程中尝试使用 rollup-plugin-fill-html，可以让你的工作变得更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb3aeb5cbfe1ea06111a6
