Nervous Penpal Message

    rollup-plugin-bundle-inject

    1.0.3 • Public • Published

    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>

    Install

    npm i rollup-plugin-bundle-inject

    DownloadsWeekly Downloads

    71

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    7.38 kB

    Total Files

    5

    Last publish

    Collaborators

    • jacketchen