Skip to content

handle multiple outputs #119

Description

@LarsDenBakker
  • Rollup Plugin Name: @rollup/plugin-html
  • Rollup Plugin Version: 0.1.0

Feature Use Case

We ship rollup-plugin-index-html which, for multiple rollup builds, is able to output a single index.html file containing both build outputs. One version with modern js syntax and esm, and one version with es5 and systemjs for older browsers.

It's kind of a hacky solution, relying on an array of rollup configs. Now that we can have plugins per output I'm looking to update our solution to utilize this instead. For the html part I'd like to to use @rollup/plugin-html.

One problem I'm running into right now is that it's not possible to collect multiple bundles into one index.html.

Feature Proposal

Add the ability to collect multiple bundles into one index.html file. For example:

import html from '@rollup/plugin-html';

export default {
  input: 'src/app.js',
  output: [
    {
      format: 'esm',
      dir: 'output',
    },
    {
      format: 'system',
      dir: 'output/legacy',
    },
  ],
  plugins: [
    html({
      template({ attributes, bundles, files, publicPath, title }) {
        return `
          <html>
            <body>
              <script type="module" src="${bundles[0]['app.js'].fileName}"></script>
              <script nomodule src="s.js"></script>
              <script nomodule src="${bundles[1]['app.js'].fileName}"></script>
            </body>
          </html>
        `;
      }
    })
  ]
}

Right now, the generateBundle hook is used to which is of course called for each separate bundle.

A possible solution could be to use another hook which has the information of all the generated bundles. I couldn't find a suitable hook for this unfortunately.

Another solution could be to inspect the amount of generated bundles, and only output the index.html (and call the template function) when all the bundles have been collected.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions