rollup-plugin-bundle-inject
v1.0.3
Published
Inject JS or CSS bundle into a template where necessary
Downloads
138
Maintainers
jacketchenReadme
rollup-plugin-bundle-inject
🍣 Inject JS or CSS bundle into a template where necessary
Install
Using npm:
npm install rollup-plugin-bundle-inject --save-devUsage
Create a rollup.config.js configuration file and import the plugin:
const bundleInject = require("rollup-plugin-bundle-inject");
module.exports = {
input: "./src/index.js",
output: {
dir: "./public/dist",
format: "cjs",
},
plugins: [
bundleInject({
// specify the template
target: "./public/index.html",
}),
],
};Once build successfully, an HTML file should be written to the bundle output destination.
Options
target
Type: String
Default: ''
Specifies the template.
_Note: This field is required, it will throw an error if you don't specify a valid value.
rename
Type: String
Default: ''
Rename the output template.
minify
Type: Boolean
Default: true
Minify the output html bundle.
minifierOptions
Type: html-minifier.Options (See options here)
Defaults:
{
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeEmptyElements: true,
}Options to use for html-minifier.
Example
By default, CSS bundle will inject into the end of the <head>, JS bundle will inject into the end of the <body>.
<!DOCTYPE html>
<html>
<head>
<title>Rollup bundle inject example</title>
<meta charset="utf-8" />
<style>
/* Content of bundle.css will goes here */
</style>
</head>
<body>
<h1>Hello World!</h1>
<script>
/* Content of bundle.js will goes here */
</script>
</body>
</html>you could decide where should be the bundle injected, by using the tag <!-- inject:css --> and <!-- inject:js -->.
<!DOCTYPE html>
<html>
<head>
<title>Rollup bundle inject example</title>
<meta charset="utf-8" />
<!-- inject:css -->
<link type="text/css" rel="stylesheet" href="bootstrap.css" />
<script src="jquery.js"></script>
<!-- inject:js -->
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>