open-wcpermalink: '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;
}