@rollup/plugin-html 详解

2023-12-19

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

@rollup/plugin-html 详解 的相关文章

  • 计算div中有多少个元素

    我有一个div 里面有span 有没有一种方法可以计算 div 中有多少个元素 然后将其作为值给出 例如 一个 div 中有 5 个跨度 那么它会对其进行计数并发出警报 5 请使用 JavaScript 谢谢 如果你想要后代的数量 你可以使
  • 如何使用 RSpec 测试 javascript 重定向?

    我正在使用 xhr post 与控制器交互 并且我期待重定向 在 js erb 中 我有 window location href address 手动测试 浏览器会正确重定向 我如何使用 RSpec 测试它 response should
  • 如何验证单选按钮?

    我的 Rails 应用程序中有一个单选按钮 我想编写一个 java 脚本代码 在未选择任何选项时验证这一点 在你的 votes 类中做类似的事情 class Myvotes lt ActiveRecord Base validates vo
  • 任何 JavaScript 代码都是有效的 TypeScript 代码吗?

    目前我已经开始学习TypeScript 从我研究过的文档来看TypeScript 我看到一些纯的样品JavaScript代码可以编译为TypeScript code 我的问题是 TypeScript 语言的设计方式是否使任何 JavaScr
  • .then(functionReference) 和 .then(function(value){return functionReference(value)}) 之间有区别吗?

    给定一个用于处理的命名函数Promise value function handlePromise data do stuff with data return data a 传递命名函数handlePromise作为参考 then pro
  • 如何从矩形点计算旋转角度?

    我有4分1 2 3 4闭合一个矩形 这些点按以下方式排列在数组中 x1 y1 x2 y2 x3 y3 x4 y4 我遇到的问题是矩形可以旋转一定角度 如何计算原始点 灰色轮廓 和角度 我试图在 javascript css3 transfo
  • ES6 Promises/在满足多个 Promise 后调用函数(不能使用 Promises.all)[重复]

    这个问题在这里已经有答案了 我正在编写 Javascript 它需要这些事件按以下顺序发生 同时触发多个 API 调用 所有调用完成且响应返回后 执行一行代码 听起来很简单 但棘手的部分是我不能使用 Promises all 因为我仍然希望
  • 为什么 if 语句中的赋值等于 true?

    首先我要说的是我理解两者之间的区别 and 第一个用于将右侧值分配给左侧变量 第二个用于比较两个值的等价性 第三个不仅用于等价性 还用于类型比较 即true 1会回来false 所以我知道almost任何时候你看到if 作者很有可能打算使用
  • 脚本标签内的 Razor RenderSection - 如何将脚本从视图插入模板函数

    我正在使用 MVC 3 和 Razor 视图引擎 我想将多个视图中的脚本注入到一个集中定义的视图中 document ready 母版页中的功能 我已经尝试过以下方法 在我的大师看来 然后 section DocumentReady ale
  • charset-utf8 和字符实体

    我建议将我的 windows 1252 XHTML 网页转换为 UTF 8 我的编码中有以下字符实体 39 撇号 9658 右指针 9668 左指针 如果我使用编辑器更改字符集并将页面保存为 UTF 8 撇号保留为字符实体 指针被转换为代码
  • 添加元数据到快速路线

    有什么方法可以将元数据添加到 Express 的路线中吗 例如 app get some route function req res some meta data 我正在寻找一种针对我的节点应用程序的 AOP 方法 因此我想通过身份验证和
  • 同源政策目的可疑

    正如我所读到的 同源策略是防止源自 邪恶 域 A 的脚本向 良好 域 B 发出请求 换句话说 跨站点请求伪造 玩了一下我了解到的Access Control Allow Origin标头和CORS据我了解 它允许从好域 B 指定服务器 域
  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div
  • 恢复默认的CSS属性

    我正在编写一个可在多个网站上使用的组件 每个网站都有自己的样式表 并且以不同的方式显示某些内容 我的所有 html 都包含在一个带有 id 的 div 中 div div 然而 我的组件是在所有网站上看起来一致 这很好 因为我将样式应用于组
  • 通过排列四个给定数字找到最大可能时间 HH:MM

    我最近为了工作晋升而参加了编码测试 这是我真正遇到的任务之一 我想知道什么是最好的方法来做到这一点 我使用了大量的 if 和 if else 这不是最干净的解决方案 但完成了工作 我被问到的问题是 将 4 个数字格式化为 24 小时时间 0
  • 使用 CSS 屏蔽图像

    我做了这样的设计 如何用CSS遮盖背景 我试过这样的代码 img poster display block max width 100 webkit mask image url https cdn pbrd co images GYiCo
  • 检测未定义的对象属性

    如何检查 JavaScript 中的对象属性是否未定义 检查属性值是否为特殊值的常用方法undefined is if o myProperty undefined alert myProperty value is the special
  • 使用来自Processing-JS的JSON

    我想使用编写一个应用程序处理 JS http processingjs org 并且我希望能够使用服务器端数据加载它 我还没有编写服务器端 所以我可以使用任何东西 但似乎明显的 AJAX 事情是使用 JSON 将数据上传到页面中 如何从我的
  • 使用 Google Visualization,为什么 DataView 内容显示在 ChartRangeFilter 中,而不显示在其关联的 LineChart 中?

    下面的代码应该从 CSV 文件填充 DataView 然后 DataView 被输入到 DashBoard 其中包含绑定在一起的 LineChart 和 ChartRangeFilter 我的问题是 虽然 ChartRangeFilter
  • 为什么插入符号在具有position:relative的contenteditable中不可见?

    When a contenteditable元素有position relative和背景颜色 插入符号放置在该元素中时是不可见的 这是一个例子 bug position relative background color lightgre

随机推荐

  • Postgresql中自增主键序列的使用以及数据传输时提示:错误:关系“xxx_xx_xx_seq“不存在

    场景 Postgresql在Windows中使用pg dump实现数据库 指定表 的导出与导入 Postgresql在Windows中使用pg dump实现数据库 指定表 的导出与导入 CSDN博客 上面讲使用pg dump进行postgr
  • 中学老师招聘条件和要求

    如果想当老师 这些条件和要求你一定得知道 那就是中学老师的招聘条件和要求 想成为一名优秀的中学老师吗 1学历要求 本科及以上学历 师范类专业优先考虑哦 毕竟专业的事还是要交给专业的人来做嘛 2 资格要求 必须持有教师资格证 这可是成为老师的
  • java 数组合并的10种方法

    在Java中 合并 或连接 数组是常见的任务 以下是10种不同的方法来实现数组的合并 首先是 10种方法的对比 1 使用 System arraycopy 方法 使用场景 当你需要快速 高效地合并两个数组时 优点 是Java标准库提供的方法
  • ElementUI el-tree 文件数据懒加载

    el tree 文件数据懒加载 div class moveFile div class treeBox div div
  • 【从服务器获取共享列表失败】【无法与设备或资源通信】解决方案!

    从服务器获取共享列表失败 背景 某项目搭建有samba共享 使用一段时间后 不知何种原因 客户端链接共享时报 从服务器获取共享列表失败 无效的参数 可参考解决方案A 银河麒麟samba共享文件 从服务器获取共享列表失败 解决方案 CSDN博
  • 前端基础Vue项目中的插槽使用

    概念 简单理解就是组件内部留一个或多个的插槽位置 可供组件传对应的模板代码进去 插槽的出现 让组件变的更加灵活 1 匿名插槽 父组件
  • 测试编排效率提升:掌握前置接口响应数据的引用方法

    宁波银行深圳分行综合柜员面经 三方寄过去了 告诉我停止24届招聘 全部毁约 牛的 he芯 毁约应届生 34316 地产投资岗上岸啦 经验分享 江西农发行市级支行信贷岗面试 最终还是搏了一把 2023届CV视觉算法岗求职记录贴 规划指南 实习
  • 计算机SSM毕设选题 在线课堂学习系统(含源码+论文)

    文章目录 1 项目简介 2 实现效果 2 1 界面展示 3 设计方案 3 1 概述 3 2 系统流程 3 3 系统结构设计 4 项目获取
  • Jtti:linux搭建开源ldap服务器的方法

    搭建开源LDAP服务器是一种用于集中管理用户身份认证和授权信息的方法 在Linux系统上 OpenLDAP是一个流行的开源LDAP实现 可以用于搭建LDAP服务器 以下是搭建OpenLDAP服务器的基本步骤 步骤一 安装OpenLDAP 安
  • 教师职业道德规范的内容

    作为一名教师 我们不仅仅是传授知识的人 更是孩子们成长道路上的引路人 我们的职业道德 不仅关乎我们的职业形象 更关乎孩子们的成长和未来 1 敬业爱生 敬业是每个职业的基本要求 对于教师而言 更是如此 我们要热爱教育事业 全身心投入其中 为孩
  • 软件测试经典面试题分析——软件测试流程

    1 需求分析 跟同事之间探讨客户需求 对需求文档进行 测试 互相交换想法 2 需求评审 如何评审 首先提前一天发邮件给格个参会人员 准备参与XXX项目需求评审 参与人员 产品经理 项目经理 研发负责人 研发小组成员 测试负责人 测试小组成员
  • 基于Apache SeaTunnel构建CDC数据同步管道

    引言 在快速发展的数据驱动时代 数据的实时 准确同步成为了企业信息系统不可或缺的一部分 随着技术的进步 特别是在分布式计算和大数据技术的背景下 构建一个高效且可靠的数据同步管道成为了挑战 Apache SeaTunnel作为一个先进的数据集
  • springboot智慧养老中心管理系统

    收藏关注不迷路 源码文章末 文章目录 一 项目介绍 二 开发环境 三 功能介绍 四 核心代码 五 效果图 六 文章目录 一 项目介绍 时代在飞速进步 每个行业都在努力发展现在先进技术 通过这些先进的技术来提高自己的水平和优势 智慧养老中心管
  • 大学老师招聘要求条件

    大学老师招聘要求条件是非常严格的 因为大学教育是培养未来人才的重要阶段 需要老师具备较高的学术水平和教育能力 学历要求 一般来说 大学老师需要具备硕士及以上学历 一些热门专业或重点高校甚至要求博士学历 这是因为大学教育需要老师具备深厚的学术
  • 图神经网络在社交媒体分析中的应用优化

    如今 社交媒体已成为人们获取信息 交流和分享的主要平台之一 海量的社交媒体数据包含着丰富的信息 但如何从这些数据中提取有效的知识仍然是一个挑战 近年来 图神经网络作为一种强大的分析工具 被广泛应用于社交媒体分析中 本文将介绍图神经网络的基本
  • 手机APP测试——如何进行安装、卸载、运行?

    手机APP测试 主要针对的是安卓 Android 和苹果IOS两大主流操作系统 主要考虑的就是功能性 兼容性 稳定性 易用性 性能等测试 今天先来讲讲如何进行安装 卸载 运行的内容 一 App安装 1 点击运行APP安装包 检测安装包是否正
  • word下划线空格不延长&对齐

    空格下划线不延长 文件 选项 常规与保存 勾选 为尾部空格添加下划线 确定 下划线对齐 首行 把第一行的下划线调到满意位置 按tab键 下面的行 删到比首行短一丢丢 按tab键
  • 【2024全网最火最全性能教程】一文搞懂性能测试!

    性能测试概念 我们经常看到的性能测试概念 有人或称之为性能策略 或称之为性能方法 或称之为性能场景分类 大概可以看到性能测试 负载测试 压力测试 强度测试等一堆专有名词的解释 针对这些概念 我不知道你看到的时候会不会像我的感觉一样 乱 一个
  • 【Proteus仿真】【Arduino单片机】视力保护仪

    文章目录 一 功能简介 二 软件设计 三 实验现象 联系作者 一 功能简介 本项目使用Proteus8仿真Arduino单片机控制器 使LCD1602液晶 DS18B20温度传感器 按键 蜂鸣器 继电器开关 HC05蓝牙模块等 主要功能 系
  • @rollup/plugin-html 详解

    rollup plugin html 是 Rollup 的一个插件 用于生成 HTML 文件 并将打包后的 JS 文件引入到 HTML 文件中 该插件的配置选项如下 fileName 指定生成的 HTML 文件的文件名 默认为 index