rollup-plugin-bundle-inject

Inject JS or CSS bundle into a template where necessary


Keywords
rollup, rollup plugin, rollup inject, rollup bundle, bundle inject
License
ISC
Install
npm install rollup-plugin-bundle-inject@1.0.0

Documentation

npm size

rollup-plugin-bundle-inject

🍣 Inject JS or CSS bundle into a template where necessary

Install

Using npm:

npm install rollup-plugin-bundle-inject --save-dev

Usage

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>