rollup-plugin-create-html
v1.0.4
Published
Creates HTML files to serve Rollup bundles and assets
Downloads
2
Maintainers
xu22webReadme
rollup-plugin-create-html
A Rollup plugin which creates HTML files to serve Rollup bundles and assets.
This plugin was inspired by @rollup/plugin-html and rollup-plugin-html2
Install
pnpm install rollup-plugin-create-html -DUsage
import { defineConfig } from 'rollup';
import html from 'rollup-plugin-create-html';
import postcss from 'rollup-plugin-postcss';
import typescript from 'rollup-plugin-typescript2';
export default defineConfig({
input: ['./src/index.ts', './src/test.ts'],
output: {
dir: './dist',
// ModuleFormat es -> type="module"
format: 'es',
},
plugins: [
// optional: with postcss
postcss({ extract: true }),
html({
template: './src/index.html',
// <title>rollup-plugin-create-html</title>
title: 'rollup-plugin-create-html',
// './index.css' './index.js'
prefix: './',
// <meta name="description" content="rollup-plugin-create-html">
meta: {
name: 'description',
content: 'rollup-plugin-create-html',
},
inject: {
// <script src="./index.js" type="module" defer></script>
'index.js': {
defer: true,
location: 'head',
},
// <link href="./index.css" rel="stylesheet" media="screen and (max-width: 600px)">
'index.css': {
media: 'screen and (max-width: 600px)',
},
// not to be injected
'test.js': false,
},
script: [
// <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
{
src: 'https://unpkg.com/vue@3/dist/vue.global.js',
},
],
link: [
// <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"></link>
{
href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',
rel: 'stylesheet',
},
// './src/images/icon.png' -> './icon.png' <link href="./icon.png" rel="icon">
{
href: './src/images/icon.png',
rel: 'icon',
},
],
fileName: 'index.html',
}),
// optional: with typescript
typescript(),
],
});Options
template
Type: string
Optional: false
Description: an HTML template
Example:
// a path
template: './index.html',// a simple html template
tempalte: '<html></html>',
// a complex html template
template: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body></body>
</html>`,title
Type: string
Optional: true
Description: title tag in an HTML template
Example:
// <title>rollup-plugin-create-html</title>
title: 'rollup-plugin-create-html',prefix
Type: string
Optional: true
Default: '/'
Description: the prefix of all injected stylesheets and scripts
Example:
// '/index.js' -> './index.js'
prefix: './',meta
Type: MetaAttributes | MetaAttributes[]
Optional: true
Description: meta tag in an HTML template
Example:
// <meta name="description" content="rollup-plugin-create-html">
meta: {
name: 'description',
content: 'rollup-plugin-create-html',
},// <meta name="description" content="rollup-plugin-create-html">
meta: [
{
name: 'description',
content: 'rollup-plugin-create-html',
}
],inject
Type: boolean | Record<string, boolean | LinkAttributes | ScriptAttributes>
Optional: true
Default: true
Description: whether to inject all stylesheets and scripts or not
Example:
// not to be injected
inject: false,inject: {
// <head>
// <script src="/index.js" type="module" defer></script>
// <head>
'index.js': {
defer: true,
location: 'head',
},
// <link href="/index.css" rel="stylesheet" media="screen and (max-width: 600px)">
'index.css': {
media: 'screen and (max-width: 600px)',
},
// not to be injected
'test.js': false,
},script
Type: ScriptAttributes | ScriptAttributes[]
Optional: true
Description: script tag in an HTML template
Example:
// <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
script: {
src: 'https://unpkg.com/vue@3/dist/vue.global.js',
},// <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
script: [
{
src: 'https://unpkg.com/vue@3/dist/vue.global.js',
},
],link
Type: LinkAttributes | LinkAttributes[]
Optional: true
Description: link tag in an HTML template
Example:
// <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"></link>
link: {
href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',
rel: 'stylesheet',
},link: [
// <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"></link>
{
href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',
rel: 'stylesheet',
},
// './src/images/icon.png' -> '/icon.png'
// <link href="/icon.png" rel="icon">
{
href: './src/images/icon.png',
rel: 'icon',
},
],fileName
Type: string
Optional: true
Description: fileName of the output html
Example:
fileName: 'index.html',