在前端开发中，我们经常需要将多个 JavaScript、CSS 和 HTML 文件打包成一个文件以便于发布和部署。Rollup 是一个流行的模块打包器，它可以将多个模块打包成一个 JavaScript 文件。但是，对于 HTML 文件的处理，Rollup 并没有提供很好的支持。为了解决这个问题，在 Rollup 中引入了 rollup-plugin-html 插件。
安装 rollup-plugin-html
使用 npm 安装：
npm install --save-dev rollup-plugin-html
配置 rollup.config.js
在 rollup.config.js 中添加以下代码来配置 rollup-plugin-html 插件：
-- -------------------- ---- -------
------ ---- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------
-------- -----------
--
-
--上述配置指定了输入文件 src/index.js，输出文件 dist/bundle.js，以及使用 umd 格式输出。同时，通过 plugins 数组指定使用 rollup-plugin-html 插件，并且只处理以 .html 结尾的文件。
示例代码
假设有以下目录结构：
project/ ├── src/ │ ├── index.js │ └── index.html └── rollup.config.js
其中，index.html 文件内容如下：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ----------- ----- ---------------- -------------------- ------- ------ ------- ------------------------ ------- -------
src/index.js 文件内容如下：
import './styles.css';
import './app.js';
console.log('Hello, world!');在 rollup.config.js 中添加 rollup-plugin-html 配置后，运行 Rollup 即可将 HTML 文件和 JavaScript 文件打包成一个文件。打包后的代码如下：
-- -------------------- ---- ------- --------- -- - ---- -------- -- ---------- --- ------ - --- --- ------ ------------ --- ------ ---------- -- ------ ------------------- --------- -- ---------- --- ------ - ---------- ---------------------------- ------------------- - ------ - ----------------------------- ----------------- - -------------------- ---------- - -------------------------- ----------------------- - ------- -----
总结
使用 rollup-plugin-html 插件可以方便地将 HTML 文件打包到 JavaScript 文件中，从而实现单一文件的部署和发布。该插件支持多种配置选项，如排除指定的文件、压缩 HTML 文件等。对于需要打包 HTML 文件的项目，该插件是非常实用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54987