@rollup/plugin-html 参数

最新推荐文章于 2024-03-28 15:12:54 发布
最新推荐文章于 2024-03-28 15:12:54 发布
阅读量894 收藏
点赞数
分类专栏： rollup  svelte 文章标签： 前端框架 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS304961760/article/details/129442184
版权

`@rollup/plugin-html` 是一个用于生成 HTML 文件的插件。通过 `@rollup/plugin-html`，您可以将 Rollup 中打包的 JavaScript 文件自动注入到 HTML 中，并可以自定义输出的 HTML 模板，添加自己的元数据等。以下是 `@rollup/plugin-html` 可用的参数：

#### `title`

- 类型: `string`

- 默认值: `'Rollup'`

用于指定生成的 HTML 文件的标题。

#### `publicPath`

- 类型: `string`

- 默认值: `'/'`

用于指定资源文件的引用路径。例如，如果资源文件位于 `public/assets` 目录中，则可以将 `publicPath` 设置为 `/assets/`，从而在 HTML 文件中的资源文件引用路径中添加前缀 `/assets/`。

#### `template`

- 类型: `string`

- 默认值: `'<!doctype html>'`

用于指定 HTML 模板文件的路径。如果您指定了 HTML 模板文件，则 `@rollup/plugin-html` 会将打包生成的 JavaScript 文件插入到该模板文件中，生成最终的 HTML 文件。如果您未指定 HTML 模板文件，则默认生成一个简单的 HTML 文件。

#### `fileName`

- 类型: `string`

- 默认值: `'index.html'`

指定生成的 HTML 文件的文件名。

#### `context`

- 类型: `object`

- 默认值: `{}`

您可以在该参数中设置上下文对象，然后在 HTML 模板文件中通过变量名来访问该上下文对象，从而对 HTML 文件进行更多的自定义设置。

以上是 `@rollup/plugin-html` 可用的参数。您可以根据您的需求来自定义这些参数来生成您需要的 HTML 文件。

CS304961760
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rollup-plugin-html2:汇总插件可将捆绑的文件注入HTML模板
05-23
:warning: 该存储库未维护！ 欢迎您继续开发rollup-plugin-html2。 请与我联系，以在npmjs.org上转让所有权。 汇总插件html2 插件，用于将捆绑的文件注入HTML模板。 该插件的灵感来自和 。 rollup-plugin-html2不会列出输出目录，但会从结果包中获取条目。 此外，它还会将生成HTML文件作为资产发出，以便其他插件可以访问它。 该插件可以与一起使用。 在这种情况下， rollup-plugin-favicons前应放置rollup-plugin-html2的插件列表。 安装 npm i -D rollup-plugin-html2 用法 // rollup.config.js import html2 from 'rollup-plugin-html2' export default { input : 'index.js' , ou
Rollup 配置生成html插件
CS304961760的博客
04-11 1014
选项接受一个函数作为参数，该函数返回一个 HTML 字符串，其中包含了模板引擎渲染出来的动态数据。占位符来插入变量或表达式，从而生成动态的 HTML 内容。要在 Rollup 中生成 HTML 文件，可以使用。
@rollup/plugin-html 使用及原理介绍
最新发布
qq_42880714的博客
03-28 753
@rollup/plugin-html 使用及原理介绍
rollup-plugin-html-literals:一个Rollup插件以最小化html模板文字
05-05
rollup-plugin-html-literals 一个Rollup插件以最小化html模板文字 用法 import template from "rollup-plugin-html-literals" ; export default { input : "index.js" , output : { file : "dist/index.js" , format : "esm" } , plugins : [ template ( ) ] } ; 这将最小化所有带有html标记的模板文字。 注意：应在转译之前使用此插件。 选项 包括 类型： array或string默认值： [] 缩小时要包含的单个文件或文件数组。 排除 类型： array或string默认值： [] 缩小时要排除的单个文件或文件数组。 failOnError， 类型： boo
rollup-plugin-html 参数
CS304961760的博客
04-13 347
是一个用于处理 HTML 文件的 Rollup 插件。分别表示 HTML 文件的输入和输出。该参数可选，用于指定预处理器的函数。: 指定是否在输出中注入 HTML 页面的。的一些常用参数，更多参数请参考官方文档。
rollup-html 插件使用
CS304961760的博客
04-13 215
@rollup/plugin-html 详解
CS304961760的博客
12-19 936
HTML 文件的标题为 "My App"，`` 标签上带有 `lang="en"` 属性，模板中的 `APP_VERSION` 参数为 "1.0.0"，生成的 HTML 文件的 `` 中带有一个 `` 标签，指定了视口大小为设备宽度，并且会对生成的 HTML 文件进行压缩和生成 sourcemap 文件。如果未指定模板，则会使用默认的模板。- `meta`: 指定生成的 HTML 文件的 `` 标签中的 `` 标签，可以是一个对象或者一个函数。
rollup-plugin-htmlvue:用于将HTMLXML转换为Vue SFC的汇总插件
05-01
rollup-plugin-htmlvue 将HTML片段和SVG导入为Vue组件。 :person_raising_hand: 为什么？ :fire: 没有与Vue编译器Comiles耦合到SFC，以便您的进行编译 :dizzy: 多功能支持任何XML可解析的标记 :rocket: 安装 npm i -D rollup-plugin-vue rollup-plugin-htmlvue :hammer_and_wrench: 设定档 rollup.config.js import vue from 'rollup-plugin-vue' ; import htmlvue from 'rollup-plugin-htmlvue' ; export default { // ... plugins : [ vue ( ) , htmlvue ( ) , ] , } 默认情况下，它仅自动解析.html文件。 要将其应用于其他扩展：
rollup-plugin-eslint:使用ESLint整理汇总套件。 :honeybee:
05-13
@ rbnlffl / rollup-plugin-eslint 使用包。 :honeybee: 很好地将最新版本到插件中。 如何 yarn add @rbnlffl/rollup-plugin-eslint --dev import eslint from '@rbnlffl/rollup-plugin-eslint' ; export default...
rollup-plugin-postcss:PostCSS汇总插件
04-18
npm install @koffeine/rollup-plugin-postcss postcss --save-dev 用法 import postcss from '@koffeine/rollup-plugin-postcss' ; export default { // ... plugins : [ postcss ( { // which files should...
rollup-plugin-string:一个Rollup插件，可以将文件导入为字符串
03-26
@ ian-sun / rollup-plugin-string 一个Rollup插件，用于将文件导入为字符串。 安装 使用npm： npm install --save-dev @ian-sun/rollup-plugin-string 用法 创建一个rollup.config.js并导入插件： // rollup.config.js import string from '@ian-sun/rollup-plugin-string' ; export default { input : 'input.js' , output : { dir : 'output' , } , plugins : [ string ( ) ] , } ; 然后通过或调用rollup 。 选项 exclude 类型： String | Array[...String] 默认
rollup-plugin-uglify：汇总插件以最小化生成的包
02-21
汇总插件-丑化 插件可最小化生成的包。 在使用 。 与本地uglify相比，有一些改进： uglify在worker中为每个块运行 错误与一起显示 注意：uglify-js只能翻译es5语法。 如果要转译es6 +语法，请改用 安装 yarn add rollup-plugin-uglify --dev 注意：此程序包需要汇总@ 0.66及更高版本 用法 import { rollup } from "rollup" ; import { uglify } from "rollup-plugin-uglify" ; rollup ( { input : "main.js" , plugins : [ uglify ( ) ] } ) ; 选项 uglify ( options ) ; options options.sourcemap: boolean 生成源地图并将其
rollup-plugin-wasm-esm
05-26
$ npm install --save @surma/rollup-plugin-wasm-esm 配置 // rollup.config.js import { wasmEsm } from "@surma/rollup-plugin-wasm-esm" ; export default { /* ... */ plugins : [ // ... wasmEsm ( ) /...
html打包程序源码,Rollup打包工具的使用（超详细，超基础，附代码截图超简单）...
weixin_30372331的博客
07-21 2824
rollup(下一代ES模块捆绑器)是什么请查看官网介绍http://rollupjs.org/guide/en/javascript注意不要看Rollup.js 中文网，由于这是别人翻译的，不是实时更新的，我以前看这个总是安装出错css以前在网络上查找过相关的rollup使用，有些文章很概念不易理解，没有具体步骤；有些文章步骤不够详细，没有前因后果。因此打算整理个文章给后来者减小弯路。我保证此文...
极客之选：用Rollup打包工具优化前端代码，让你成为前端领域的高手
关注老赵不迷路，老赵带你上高速
03-01 777
本文介绍了一个名为Rollup的打包工具，该工具可以帮助开发人员优化前端代码，减小代码体积，提高网站性能。
【rollup】rollup打包一个npm包
qq_48896417的博客
12-29 917
rollup打包一个npm包的例子。
Rollup各组件作用
y1377593732的博客
07-02 933
Rollup相关组件备注
【实战篇】最详细的Rollup打包项目教程
热门推荐
小陈的博客
09-22 1万+
自动将 dependencies 依赖声明为 externals支持处理外部 npm 依赖支持基于 CommonJS 模块引入支持 typescript，并导出声明文件支持 scss，并添加前缀支持自动清除调试代码打包输出文件保留原始模块结构支持按需加载rollup是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。rollup为什么是rollup而不是webpack呢？rollup的特色是ES6模块和代码，这些webpack。
rollup入门学习（一）
Jason_yuxuan的博客
11-06 3789
**Rollup是JavaScript的模块绑定器**，它将小段代码编译成更大更复杂的代码，比如库或应用程序。
@rollup/plugin-dynamic-import-vars
09-16
@rollup/plugin-dynamic-import-vars 是一个 Rollup 插件，用于处理动态导入（Dynamic Import）语法中的变量部分。 在 ES 模块中，我们可以使用动态导入语法来动态加载模块。而 @rollup/plugin-dynamic-import-vars...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值