@rollup/plugin-html 详解

最新推荐文章于 2024-03-06 17:08:13 发布

CS304961760

最新推荐文章于 2024-03-06 17:08:13 发布

阅读量1.1k

点赞数 9

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/CS304961760/article/details/135082833

版权

@rollup/plugin-html 是 Rollup 的一个插件，用于生成 HTML 文件，并将打包后的 JS 文件引入到 HTML 文件中。

该插件的配置选项如下：

- `fileName`: 指定生成的 HTML 文件的文件名，默认为 `index.html`。
- `template`: 指定 HTML 文件的模板路径，可以是一个本地文件路径或者是一个模板字符串。如果未指定模板，则会使用默认的模板。
- `publicPath`: 指定生成的 HTML 文件中引入 JS 文件的路径，默认为 `/`。
- `title`: 指定生成的 HTML 文件的标题。
- `attributes`: 指定生成的 HTML 文件的 `<html>` 标签上的属性，可以是一个对象或者一个函数。
- `templateParams`: 指定传递给模板的参数，可以是一个对象或者一个函数。
- `inject`: 指定 JS 文件的引入位置，可以是一个字符串或者一个函数。
- `favicon`: 指定生成的 HTML 文件的 favicon 图标的路径。
- `meta`: 指定生成的 HTML 文件的 `<head>` 标签中的 `<meta>` 标签，可以是一个对象或者一个函数。
- `minify`: 指定是否压缩生成的 HTML 文件，默认为 `false`。
- `sourcemap`: 指定是否生成 JS 文件的 sourcemap，默认为 `false`。

示例配置：
```javascript
import { html } from '@rollup/plugin-html';

export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [
html({
fileName: 'index.html',
template: 'src/index.html',
publicPath: '/',
title: 'My App',
attributes: {
lang: 'en',
},
templateParams: {
APP_VERSION: '1.0.0',
},
inject: 'body',
favicon: 'src/favicon.ico',
meta: {
viewport: 'width=device-width, initial-scale=1.0',
},
minify: true,
sourcemap: true,
}),
],
};
```

上述配置会将 `src/index.html` 文件作为模板，生成一个名为 `index.html` 的文件，并将打包后的 JS 文件引入到 HTML 文件的 `<body>` 中。HTML 文件的标题为 "My App"，`<html>` 标签上带有 `lang="en"` 属性，模板中的 `APP_VERSION` 参数为 "1.0.0"，生成的 HTML 文件的 `<head>` 中带有一个 `<meta>` 标签，指定了视口大小为设备宽度，并且会对生成的 HTML 文件进行压缩和生成 sourcemap 文件。