rollup-plugin-xhtml-fuck-24h-unpublish-delay v1.0.5
rollup-plugin-xhtml
No bells and whistles rollup plugin to inject bundled files into HTML templates
Installation
In your project folder run the following command to install the plugin as development dependency.
npm install --save-dev rollup-plugin-xhtmlUsage
The plugin will process a list of given template files by replacing certain placeholders with the corresponding bundled files.
The placeholder <![CDATA[styles]]> will be replaced with all bundled stylesheets.
The placeholder <![CDATA[scripts]]> will be replaced with all bundled scripts/modules.
TIP: To prevent certain bundles from being injected, just remove the corresponding placeholder
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hello World</title>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/style.css">
<![CDATA[styles]]> <!-- NOTE: This placeholder will be replaced with bundled CSS files -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<![CDATA[scripts]]> <!-- NOTE: This placeholder will be replaced with bundled JS/MJS files -->
</head>
<body></body>
</html>Within the rollup configuration add the plugin. Simply provide a list of templates with their source and destination path to inject the bundled files.
NOTE: Pattern matching such as regex or glob is not support
rollup.config.js
/* other imports ... */
import xhtml from 'rollup-plugin-xhtml';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'es'
},
plugins: [
/* other plugins ... */
xhtml({
targets: [
{ src: 'src/index.html', dest: 'dist/index.html' }
]
})
]
};