https://github.com/bengsfort/rollup-plugin-generate-html-template

Rollup plugin for automatically injecting a script tag with the final bundle into an html file.
https://github.com/bengsfort/rollup-plugin-generate-html-template

html-template rollup rollup-plugin

Last synced: 27 days ago
JSON representation

Rollup plugin for automatically injecting a script tag with the final bundle into an html file.

• Host: GitHub
• URL: https://github.com/bengsfort/rollup-plugin-generate-html-template
• Owner: bengsfort
• License: mit
• Created: 2018-03-21T07:42:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:12:57.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T19:52:10.646Z (about 1 month ago)
• Topics: html-template, rollup, rollup-plugin
• Language: HTML
• Size: 925 KB
• Stars: 60
• Watchers: 2
• Forks: 19
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - generate-html-template - Generate an HTML file for a bundle. (Plugins / Output)

README

        
# rollup-plugin-generate-html-template

![build status](https://api.travis-ci.org/bengsfort/rollup-plugin-generate-html-template.svg?branch=master) [![npm version](https://badge.fury.io/js/rollup-plugin-generate-html-template.svg)](https://www.npmjs.com/package/rollup-plugin-generate-html-template) ![code coverage](coverage/coverage.svg)

Auto-inject the resulting rollup bundle via `script` and `link` tags into an HTML template.

## Installation

```shell

npm install --save-dev rollup-plugin-generate-html-template

```

## Usage

```js

// rollup.config.js

import htmlTemplate from 'rollup-plugin-generate-html-template';

export default {

  entry: 'src/index.js',

  dest: 'dist/js/bundle.js',

  plugins: [

    htmlTemplate({

      template: 'src/template.html',

      target: 'index.html',

    }),

  ],

};

```

On final bundle generation the provided template file will have a `script` tag injected directly above the closing `body` tag with a link to the js bundle and similarly a `link` tag above the closing `head` to the css bundle. By default it uses the same file name and places it directly next to the JS bundle.

```html

  

    Example

  

  

  

    Example

    

  

  

  

```

### Options

- `template`: **(required)** The path to the source template.

- `target`: The directory and file name to use for the html file generated with the bundle.

- `attrs`: The attributes provided to the generated bundle script tag. Passed as an array of strings

  Example: `attrs: ['async', 'defer]` will generate ``

- `replaceVars`: An object containing variables that will be replaced in the generated html.

    Example: `replaceVars: { '__CDN_URL__': process.env.NODE_ENV === 'production' ? 'https://mycdn.com' : '' }` will replace all instances of `__CDN_URL__` with `http://mycdn.com` if the environment is production

## License

MIT