Building: Rollup Plugin Polyfills Loader

Rollup plugin for injecting a Polyfills Loader into a HTML file generated by @web/rollup-plugin-html.

Examples

Basic rollup build

With a single build output a runtime loader is injected to load polyfills on browsers which don't support certain features.

import html from '@web/rollup-plugin-html';
import polyfillsLoader from '@web/rollup-plugin-polyfills-loader';

export default {
  output: { dir: 'dist' },
  plugins: [
    html({ input: 'index.html' }),
    polyfillsLoader({
      polyfills: {
        coreJs: true,
        fetch: true,
        webcomponents: true,
      },
    }),
  ],
};

Multiple rollup build outputs

When you have multiple rollup build outputs, the polyfills loader can load the modern or legacy build based on the browser.

import html from '@web/rollup-plugin-html';
import polyfillsLoader from '@web/rollup-plugin-polyfills-loader';

// create an instance of the HTML plugin
const htmlPlugin = html({ input: 'index.html' });

export default {
  output: [
    {
      format: 'system',
      chunkFileNames: 'nomodule-[name]-[hash].js',
      entryFileNames: 'nomodule-[name]-[hash].js',
      dir: 'dist',
      // add a legacy build child plugin
      plugins: [htmlPlugin.api.addOutput('legacy')],
    },
    {
      format: 'es',
      chunkFileNames: '[name]-[hash].js',
      entryFileNames: '[name]-[hash].js',
      dir: 'dist',
      // add a modern build child plugin
      plugins: [htmlPlugin.api.addOutput('modern')],
    },
  ],
  plugins: [
    htmlPlugin,
    polyfillsLoader({
      modernOutput: { name: 'modern' },
      legacyOutput: { name: 'legacy', test: "!('noModule' in HTMLScriptElement.prototype)" },
      polyfills: {
        coreJs: true,
        fetch: true,
        webcomponents: true,
      },
    }),
  ],
};

External loader script

By default the polyfills loader script is inlined into the HTML. You can configure the plugin to create an external script:

import html from '@web/rollup-plugin-html';
import polyfillsLoader from '@web/rollup-plugin-polyfills-loader';

export default {
  output: { dir: 'dist' },
  plugins: [
    html({ input: 'index.html' }),
    polyfillsLoader({
      polyfills: {
        coreJs: true,
        fetch: true,
        webcomponents: true,
      },
      externalLoaderScript: true,
    }),
  ],
};