@rollup/plugin-html 参数

最新推荐文章于 2023-12-19 13:45:50 发布
原创 最新推荐文章于 2023-12-19 13:45:50 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端框架

@rollup/plugin-html插件用于生成HTML并注入JS，支持自定义标题、资源路径、模板和文件名。通过调整参数如publicPath和template，能更好地定制HTML输出。

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

@rollup/plugin-html 使用及原理介绍
qq_42880714的博客
03-28 1468
@rollup/plugin-html 使用及原理介绍
Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别
Thinking anywhere anytime.
07-16 1535
Rollup工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。浏览器（代码通过 Script 标签引入）AMD（兼容 requirejs.js 框架）CommonJS（Node.js 代码通过 CJS 方式引入）UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）后面会提到每个命令的作用，这里了解即可。
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-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的博客
12-19 1537
HTML 文件的标题为 "My App"，`` 标签上带有 `lang="en"` 属性，模板中的 `APP_VERSION` 参数为 "1.0.0"，生成的 HTML 文件的 `` 中带有一个 `` 标签，指定了视口大小为设备宽度，并且会对生成的 HTML 文件进行压缩和生成 sourcemap 文件。如果未指定模板，则会使用默认的模板。- `meta`: 指定生成的 HTML 文件的 `` 标签中的 `` 标签，可以是一个对象或者一个函数。
Rollup 配置生成html插件
CS304961760的博客
04-11 1326
选项接受一个函数作为参数，该函数返回一个 HTML 字符串，其中包含了模板引擎渲染出来的动态数据。占位符来插入变量或表达式，从而生成动态的 HTML 内容。要在 Rollup 中生成 HTML 文件，可以使用。
@prerenderer/rollup-plugin插件
03-13
好的，用户想查找关于@prerenderer/rollup-plugin插件的文档和使用方法。首先，我需要回忆这个插件的用途，它是一个用于Rollup的预渲染插件，通常用于单页应用（SPA）的静态页面生成，以改善SEO和加载性能。接下来，...
import path from 'path'; import * as fs from 'fs'; import * as https from 'https'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import eslint from 'vite-plugin-eslint'; import { visualizer } from 'rollup-plugin-visualizer'; import * as ssl from 'ssl-root-cas'; import { commonAssetsPrefix } from './src/constants/config-env'; const { ANALYZE } = process.env; const rootCas = ssl.create(); rootCas.addFile(path.resolve(__dirname, 'node_modules/@ffe/fcore-build-utils/.certs/cert.pem')); https.globalAgent.options.ca = rootCas; function getHttpsConfig() { return { cert: fs.readFileSync(path.resolve(__dirname, 'node_modules/@ffe/fcore-build-utils/.certs/cert.pem')), key: fs.readFileSync(path.resolve(__dirname, 'node_modules/@ffe/fcore-build-utils/.certs/key.pem')), }; } export default defineConfig(config => ({ base: config.mode === 'production' ? commonAssetsPrefix : '/', resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@aurora/theme': '@aurora/theme-saas', }, }, css: { preprocessorOptions: { scss: { additionalData: '@import "./theme-saas/styles.scss";', }, }, }, plugins: [ vue(), eslint({ // 检查出“警告”级别的问题时，输出警告到控制台 emitWarning: true, // 检查出“错误”级别的问题时，不输出为 error（不抛出 error，不影响渲染，只输出 错误信息） emitError: false, // 检查出 warning 时，不让打包/启动失败 failOnWarning: false, }), ...(ANALYZE === 'true' ? [ visualizer({ open: false, gzipSize: true, brotliSize: true, filename: 'dist/stats.html', }), ] : []), ], build: { target: 'esnext', }, define: { VERSION_PLACEHOLDER: JSON.stringify('1.0.0'), __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false, 'process.env': Object.assign({}, process.env), }, server: { hmr: true, port: 4173, open: true, host: 'localhost.huawei.com', cors: true, proxy: { '/ffe': { target: 'https://kwesit.huawei.com', changeOrigin: true, rewrite: pathItem => pathItem.replace(/^\/ffe/, ''), }, }, https: getHttpsConfig(), }, })); 以上是我的vite设置，打包后部署完打开index。html白屏，无任何报错，帮忙看看可能是什么原因
08-01
- 在 `index.html` 中添加缓存破坏参数（如 `<script src="assets/index.js?v=1.0">`）[^1][^3]。 #### 通用排查流程 1. **本地验证**：打包后，在本地使用 `npx serve dist` 启动静态服务器，测试是否能正常访问...
import path from 'path'; import * as fs from 'fs'; import * as https from 'https'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import eslint from 'vite-plugin-eslint'; import { visualizer } from 'rollup-plugin-visualizer'; import * as ssl from 'ssl-root-cas'; import { commonAssetsPrefix } from './src/constants/config-env'; const { ANALYZE } = process.env; const rootCas = ssl.create(); rootCas.addFile(path.resolve(__dirname, 'node_modules/@ffe/fcore-build-utils/.certs/cert.pem')); https.globalAgent.options.ca = rootCas; function getHttpsConfig() { return { cert: fs.readFileSync(path.resolve(__dirname, 'node_modules/@ffe/fcore-build-utils/.certs/cert.pem')), key: fs.readFileSync(path.resolve(__dirname, 'node_modules/@ffe/fcore-build-utils/.certs/key.pem')), }; } export default defineConfig(config => ({ base: config.mode === 'production' ? commonAssetsPrefix : '/', resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@aurora/theme': '@aurora/theme-saas', }, }, css: { preprocessorOptions: { scss: { additionalData: '@import "./theme-saas/styles.scss";', }, }, }, plugins: [ vue(), eslint({ // 检查出“警告”级别的问题时，输出警告到控制台 emitWarning: true, // 检查出“错误”级别的问题时，不输出为 error（不抛出 error，不影响渲染，只输出 错误信息） emitError: false, // 检查出 warning 时，不让打包/启动失败 failOnWarning: false, }), ...(ANALYZE === 'true' ? [ visualizer({ open: false, gzipSize: true, brotliSize: true, filename: 'dist/stats.html', }), ] : []), ], build: { target: 'esnext', }, define: { VERSION_PLACEHOLDER: JSON.stringify('1.0.0'), __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false, 'process.env': Object.assign({}, process.env), }, server: { hmr: true, port: 4173, open: false, host: 'localhost.huawei.com', cors: true, proxy: { '/ffe': { target: 'https://kwesit.huawei.com', changeOrigin: true, rewrite: pathItem => pathItem.replace(/^\/ffe/, ''), }, }, https: getHttpsConfig(), }, })); 以上是我的vite配置，如何调整能使其在测试环境 打包的代码不混淆压缩，使得测试环境能读懂代码
最新发布
08-01
假设我们使用环境变量`VITE_USER_NODE_ENV`（或任何其他自定义环境变量）来区分环境，或者直接使用`mode`（通过命令行参数`--mode test`传递）。 在`vite.config.ts`中： ```ts import { defineConfig } from ...
rollup-plugin-html 参数
CS304961760的博客
04-13 493
是一个用于处理 HTML 文件的 Rollup 插件。分别表示 HTML 文件的输入和输出。该参数可选，用于指定预处理器的函数。: 指定是否在输出中注入 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-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-html 插件使用
CS304961760的博客
04-13 331
html打包程序源码,Rollup打包工具的使用（超详细，超基础，附代码截图超简单）...
weixin_30372331的博客
07-21 2997
rollup(下一代ES模块捆绑器)是什么请查看官网介绍http://rollupjs.org/guide/en/javascript注意不要看Rollup.js 中文网，由于这是别人翻译的，不是实时更新的，我以前看这个总是安装出错css以前在网络上查找过相关的rollup使用，有些文章很概念不易理解，没有具体步骤；有些文章步骤不够详细，没有前因后果。因此打算整理个文章给后来者减小弯路。我保证此文...
极客之选：用Rollup打包工具优化前端代码，让你成为前端领域的高手
关注老赵不迷路，老赵带你上高速
03-01 968
本文介绍了一个名为Rollup的打包工具，该工具可以帮助开发人员优化前端代码，减小代码体积，提高网站性能。
【rollup】rollup打包一个npm包
qq_48896417的博客
12-29 1209
rollup打包一个npm包的例子。
Rollup各组件作用
y1377593732的博客
07-02 1074
Rollup相关组件备注
03｜从Rollup到Vite：如何用Vite构建你的Vue3项目？
sucaiwa的博客
03-01 1305
又到每一节课的总结时间，我们这节课主要从“Rollup配置Vue.js 3项目”到“Vite配置Vue.js 3项目”，通过对比来介绍Vite的技术理念和使用方式，更多Vite的使用方式可以查看官方文档。与此同时，这节课也不是简单介绍Rollup和Vite的配置项目，而是通过一个对比，让你能知道Vite是作为官方标配工具的原因和演进历程。这些技术工具演进历程，可以让你在做企业级项目时候，可以在技术选型上做参考。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值