@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 详解 的相关文章

  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li

随机推荐

  • 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