gem-hunter
Language: TypeScript
Inject rollup bundle into html
🍣 Inject JS or CSS bundle into a template where necessary
Using npm:
npm install rollup-plugin-bundle-inject --save-dev
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.
Type: String
Default: ''
Specifies the template.
_Note: This field is required, it will throw an error if you don't specify a valid value.
Type: String
Default: ''
Rename the output template.
Type: Boolean
Default: true
Minify the output html bundle.
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.
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>