permalink: 'building/rollup-plugin-polyfills-loader.html' title: Rollup Plugin Polyfills Loader section: guides tags: - guides

Rollup Plugin Polyfills Loader

Inject Polyfills Loader into a HTML file generated by @open-wc/rollup-plugin-html.

Examples

Basic rollup build

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

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

Multiple rollup build outputs

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

const htmlPlugin = html({
  inputPath: 'demo/single-build/index.html',
  inject: false,
});

export default {
  output: [
    {
      format: 'system',
      dir: './demo/dist/legacy',
      plugins: [htmlPlugin.addOutput('legacy')],
    },
    {
      format: 'es',
      dir: './demo/dist',
      plugins: [htmlPlugin.addOutput('modern')],
    },
  ],
  plugins: [
    htmlPlugin,
    polyfillsLoader({
      modernOutput: 'modern',
      legacyOutput: { name: 'legacy', test: "!('noModule' in HTMLScriptElement.prototype)" },
      polyfills: {
        coreJs: true,
        fetch: true,
        webcomponents: true,
      },
    }),
  ],
};

Customized file type

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

const htmlPlugin = html({
  inputPath: 'demo/single-build/index.html',
  inject: false,
});

export default {
  output: [
    {
      format: 'es',
      dir: './demo/dist',
      plugins: [htmlPlugin.addOutput('modern')],
    },
    {
      format: 'es',
      dir: './demo/dist/legacy',
      plugins: [htmlPlugin.addOutput('legacy')],
    },
  ],
  plugins: [
    htmlPlugin,
    polyfillsLoader({
      modernOutput: { name: 'modern', type: 'module' },
      legacyOutput: {
        name: 'legacy',
        type: 'system',
        test: "!('noModule' in HTMLScriptElement.prototype)",
      },
      polyfills: {
        coreJs: true,
        fetch: true,
        webcomponents: true,
      },
    }),
  ],
};

Multi page build

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

export default {
  output: {
    dir: './demo/dist',
  },
  plugins: [
    html({
      inputPath: './demo/multi-page/index.html',
    }),
    polyfillsLoader({
      htmlFileName: 'index.html',
      polyfills: { coreJs: true, fetch: true },
    }),

    html({
      inputPath: './demo/multi-page/pages/page-a.html',
      name: 'pages/page-a.html',
    }),
    polyfillsLoader({
      htmlFileName: 'pages/page-a.html',
      polyfills: { coreJs: true, fetch: true },
    }),

    html({
      inputPath: './demo/multi-page/pages/page-b.html',
      name: 'pages/page-b.html',
    }),
    polyfillsLoader({
      htmlFileName: 'pages/page-b.html',
      polyfills: { coreJs: true, fetch: true },
    }),

    html({
      inputPath: './demo/multi-page/pages/page-c.html',
      name: 'pages/page-c.html',
    }),
    polyfillsLoader({
      htmlFileName: 'pages/page-c.html',
      polyfills: { coreJs: true, fetch: true },
    }),
  ],
};

You can make this shorter with a helper function:

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

function createPage(inputPath, name) {
  return [
    html({ inputPath, name }),
    polyfillsLoader({
      htmlFileName: name,
      polyfills: { coreJs: true, fetch: true },
    }),
  ];
}

export default {
  output: {
    dir: './demo/dist',
  },
  plugins: [
    ...createPage('./demo/multi-page/index.html', 'index.html'),
    ...createPage('./demo/multi-page/pages/page-a.html', 'pages/page-a.html'),
    ...createPage('./demo/multi-page/pages/page-b.html', 'pages/page-b.html'),
    ...createPage('./demo/multi-page/pages/page-c.html', 'pages/page-c.html'),
  ],
};

Types

import { PolyfillsConfig, FileType } from 'polyfills-loader';

export interface OutputConfig {
  name: string;
  type?: FileType;
}

export interface LegacyOutputConfig extends OutputConfig {
  test: string;
}

export interface PluginOptions {
  htmlFileName?: string;
  modernOutput?: OutputConfig;
  legacyOutput?: LegacyOutputConfig | LegacyOutputConfig[];
  polyfills?: PolyfillsConfig;
}