npm package: @open-wc/rollup-plugin-polyfills-loader
Description: Plugin for generating an html file with rollup
Author: open-wc
Latest version: 1.1.8

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

# Rollup Plugin Polyfills Loader

Inject [Polyfills Loader](https://github.com/open-wc/open-wc/tree/master/packages/polyfills-loader) into a HTML file generated by [@open-wc/rollup-plugin-html](https://github.com/open-wc/open-wc/tree/master/packages/rollup-plugin-html).

## Examples

### Basic rollup build

```js
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

```js
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

```js
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

```js
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:

```js
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

```ts
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;
}
```