@rollup/plugin-html 详解

原创于 2023-12-19 13:45:50 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

本文详细介绍了Rollup的@rollup/plugin-html插件的配置选项，包括文件名、模板、公共路径等，以及如何在配置中指定HTML文件的结构和特性。

@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 文件。