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

License: MIT License

JavaScript 5.18% HTML 93.69% CSS 1.13%

rollup-plugin-generate-html-template's Introduction

rollup-plugin-generate-html-template

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

Installation

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

Usage

// 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.

<!-- src/index.html -->
<html>
  <head>
    <title>Example</title>
  <head>
<body>
  <canvas id="main"></canvas>
</body>
</html>

<!-- dist/index.html -->
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="bundle.css">
  <head>
<body>
  <canvas id="main"></canvas>
  <script src="bundle.js"></script>
</body>
</html>

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 <script async defer src="bundle.js"></script>
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

rollup-plugin-generate-html-template's People

Contributors

Stargazers

Watchers

Forkers

rencire erdii haifeng2013 erhathaway deineryao razer-rbi jamestthompson3 dmitrybirin snellcode 0xhexe npup webdevisme docd27 yudintsevroman lenamax2355 presenta-software jonataneriksson nysosis

rollup-plugin-generate-html-template's Issues

Adds additional characters with multiple entry points

When multiple entry points are found (like when using web workers), then extra comma (',') characters get written to the html file. The injection code needs to expand the bundles array, something like this:

// Inject the script tags before the body close tag
const injected = [
    tmpl.slice(0, bodyCloseTag),
    ...bundles.map(b => `<script src="${b}"></script>\n`),
    tmpl.slice(bodyCloseTag, tmpl.length),
].join("");

Support for hooking into livereload process

I'm not sure how possible this is, I'm only really just starting to use Rollup. This plugin does its job well for a one-time build but it doesn't seem to rebuild the html when used in conjunction with rollup-plugin-livereload. I'm not sure its possible to hook into that process to know when the index.html changed ini order to rebuild it but that would be a great feature.

Can't output into subdirectory

My config:

export default {
  input: 'src/main.ts',
  output: {
    dir: 'public',
    entryFileNames: '[name].[hash].js',
    chunkFileNames: '[name].[hash].js',
    format: 'iife',
  },
  plugins: [
    htmlTemplate({
      template: 'src/index.html',
      target: 'public/index.html', // << Note: root of output dir
      replaceVars,
    }),
    htmlTemplate({
      template: 'src/views/modal.html',

      // This always gets output in root of /public dir
      target: 'public/views/modal.html', // << Note: subdir in output dir

      replaceVars,
    }),
  ],
};

In my source I have index.html in the root folder and then a views/ folder for other views. I'd like that mirrored in the output folder but it doesn't seem possible as views always get output in root of output dir. Any suggestions or is it a bug? Thanks

Multiple bundles injected into the same template

I need to create two separate configurations, but want them to share template (and target). However, the last config's output bundle takes precedence when the target is shared, so only "bundle2.js" gets injected via a script tag.

So far, I have not found a way to somehow have each bundle injected into the same target. Any ideas on how to make this happen?

Using with html-minifier

Amazing work!

It would be amazing if it can minify the final html file, maybe with https://github.com/kangax/html-minifier.

What are your thoughts on this, @bengsfort?

Doesn't work when the target directory doesn't exist

Consider this simple config:

{
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    html({
      template: 'src/index.html',
      target: 'index.html'
    })
  ]
}

Now, if the directory dist doesn't exist, the plugin errors with (html-template plugin) Error: ENOENT: no such file or directory, open 'dist/index.html'

I'd rather expect this plugin to ensure that the directory it tries to write to exist. What do you think about this?

Path prefix option

It would be great if there was an option to specify path prefix to be used in <script> tags.
I have some .html output files served from non-root URLs, and their JS bundles are not being loaded because <script> tag uses a relative URL.

Example:

No prefix specified (default)

<script src='app.js'></script>

With a prefix specified ('/' for example)

<script src='/app.js'></script>

I'm looking to implementing it myself, it seems to be an easy task. I hope you don't mind a pull request 😉

Missing dist in npm packages [email protected]

Build is missing in release version 1.1.1

Split bundles from dynamic imports are being injected.

I discovered this started happening specifically in the transition from 1.6.1 -> 1.7.0

This is what my index.html bundle injection looked like in 1.6.1:

When it upgraded to 1.7.0 it started injecting every single bundle generated, not just the entry point:

Right now I'm working around this issue by just forcing the use of 1.6.1 in my package.json. This is in essence breaking the use of dynamic imports with rollup.

Here's what the config of the plugin looks like in my rollup.config.js:

Doesn't work with hash/chunking

Rollup allows hashing/chunking, your plugin only works with the singular static bundle file.
Would be nice if it worked with both solutions from Rollup.

Customize bundle script injecting

I would like to customize the output of bundle script injection somehow or disable it at all, but seems it is not possible?

Current result

HEAD
<body>
    BODY
<script  src="myModule.js"></script>
<script  src="myModule1-adb87986.js"></script> <<< caused by dynamic import
<script  src="myModule2-c25eb9cc.js"></script> <<< caused by dynamic import
</body>
</html>

What I need:

HEAD
<body>
    BODY
    <script>
        systemJsLoader.load('myModule.js');
    </script>
</body>
</html>

.css injection supported by postcss plugin only?

i tried 'rollup-plugin-css-porter' and 'rollup-plugin-css-only',
it also provide bundle.css to output path, but not injected to generated .html

Inject css files

It would be amazing to also inject all .css bundled files.

bengsfort / rollup-plugin-generate-html-template Goto Github PK