@rollup/plugin-html 使用及原理介绍
@rollup/plugin-html 插件用于处理 HTML 文件，它能够将 HTML 文件作为 Rollup 打包过程的一部分来处理。这个插件能够提取 JavaScript 依赖、插入通过 Rollup 打包生成的 bundle 到 HTML 文件中，并且可以通过模板定制最终生成的 HTML 文件。
使用方法
首先，你需要安装这个插件：
npm install @rollup/plugin-html --save-dev然后，在你的 Rollup 配置文件中引入并使用这个插件：
import html from '@rollup/plugin-html';
export default {
plugins: [
html({
// 插件选项
}),
],
// ... 其他 Rollup 配置
};工作原理
@rollup/plugin-html 插件会查找 Rollup 配置中指定的 HTML 文件，并读取其中的内容。插件会解析这些文件，寻找 JavaScript 依赖，并且可以将这些依赖项添加到 Rollup 的打包过程中。
在打包过程完成后，插件会将生成的 bundle 引用插入到 HTML 文件中。这个过程是可配置的，你可以指定插入 bundle 的位置，是否生成带 hash 的文件名等。
此外，插件还允许你通过模板定制最终生成的 HTML 文件。你可以指定一个模板文件，插件会使用你指定的模板来生成最终的 HTML 文件。
示例配置
import html from '@rollup/plugin-html';
export default {
plugins: [
html({
template: ({ attributes, bundle: { code }, files, meta }) => {
return `
<!doctype html>
<html ${attributes.toString()}>
<head>
<meta charset="utf-8">
${Object.keys(meta).map(key => `
<meta name="${key}" content="${meta[key]}">
`).join('')}
</head>
<body>
<div id="app"></div>
${code}
</body>
</html>
`;
}
}),
],
// ... 其他 Rollup 配置
};在这个配置中，template 选项是一个函数，它接收一个对象作为参数，该对象包含了 attributes, bundle, files, 和 meta 属性。插件会使用这个函数来生成最终的 HTML 文件。在这个函数中，你可以自定义你的 HTML 结构，包括如何引入生成的 bundle 和其他资源。
评论已关闭