@aminnairi/rollup-plugin-generate-html

Automatic HTML Generator

Usage no npm install needed!

<script type="module">
  import aminnairiRollupPluginGenerateHtml from 'https://cdn.skypack.dev/@aminnairi/rollup-plugin-generate-html';
</script>

README

rollup-plugin-generate-html

Automatic HTML Generator

Summary

1. What does it do?

This plugin will write an index.html file containing all of your bundled scripts.

Back to summary.

2. Installation

2.1 NPM

$ npm install @aminnairi/rollup-plugin-generate-html

Back to summary.

2.2 Yarn

$ yarn add @aminnairi/rollup-plugin-generate-html

Back to summary.

3. Usage

// rollup.config.js
import { generateHtml } from '@aminnairi/rollup-plugin-generate-html'

export default {
  input: 'src/index.js',

  output: {
    file: 'dist/index.js',
    format: 'iife'
  },

  plugins: [
    generateHtml()
  ]
}

Back to summary.

4. Example output

<!-- ./dist/index.html -->
<!doctype html>
<html lang='en-US'>
  <head>
    <meta charset='utf-8'>
    <title>My Application</title>
  </head>
  <body>
    <script src='index.js'></script>
  </body>
</html>

Back to summary.

5. API

/**
 * @description Inject a bundle into an automatically created HTML file
 * @param {object} [configuration] The configuration object
 * @param {string} [configuration.charset=utf-8] The character set used in the meta charset tag
 * @param {string} [configuration.title=My Application] The string used in the HTML title tag
 * @param {string} [configuration.lang=en-US] The string used in the lang attribute of the html tag
 * @param {string} [configuration.path] The destination where to put the HTML file (default to rollup.output.file base directory)
 * @param {string} [configuration.publicPath] The string added before the script url
 * @param {string} [configuration.id] Will include a div with a specified id attribute, typically for JavaScript frameworks (Vue, React, ...)
 */
generateHtml({
  charset: 'ISO-8859-1',
  title: 'My Awesome Application',
  lang: 'fr-FR',
  path: '../docs',
  publicPath: '/home/',
  id: 'app'
})

Back to summary.