npmpackage.info

Gathering detailed insights and metrics for rollup-plugin-index-html

Other packages similar to rollup-plugin-index-html

rollup-plugin-index

1.1.4

Rollup plugin to inject script and link tags into a HTML template.

rollup-plugin-html-template

1.0.3

Simple rollup plugin to generate index.html & auto inject outputfile for webapp build

Gathering detailed insights and metrics for rollup-plugin-index-html

rollup-plugin-index-html - 1.12.8 | npmpackage.info

rollup-plugin-index-html

Open Web Components: guides, tools and libraries for developing web components.

1.12.8

2,329

MIT

JavaScript

4.8

Installations

npm install rollup-plugin-index-html

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.16.0

NPM Version

lerna/3.4.3/node@v10.16.0+x64 (linux)

Pull Requests

Open

36

Total

1,824

Closed

380

Merged

1,408

Issues

Open

147

Total

984

Closed

837

Releases

204

eslint-plugin-lit-a11y@5.1.0

Updated on Jun 28, 2025

@open-wc/dedupe-mixin@2.0.1

Updated on Jun 25, 2025

eslint-plugin-lit-a11y@5.0.1

Updated on Jun 09, 2025

eslint-plugin-lit-a11y@5.0.0

Updated on Jun 04, 2025

@open-wc/eslint-config@13.0.0

Updated on Jun 04, 2025

eslint-plugin-lit-a11y@4.1.4

Updated on Jul 11, 2024

View All 204 releases

Languages

JavaScript

TypeScript

HTML

MDX

Shell

JavaScript (95.74%)

TypeScript (2.45%)

HTML (1.68%)

MDX (0.12%)

Shell (0.01%)

Developer

open-wc

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2,329 Stars

2,581 Commits

426 Forks

46 Watchers

85 Branches

225 Contributors

Updated on Jul 11, 2025

Maintainers

View All 225 Contributors

Package Meta Information

Latest Version

1.12.8

Package Id

rollup-plugin-index-html@1.12.8

Size

9.80 kB

NPM Version

lerna/3.4.3/node@v10.16.0+x64 (linux)

Node Version

10.16.0

Published on

Oct 11, 2020

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@import-maps/resolve @open-wc/building-utils deepmerge lit-html md5 mkdirp parse5

Dev Dependencies

@webcomponents/shadycss @webcomponents/webcomponentsjs intersection-observer whatwg-fetch

Rollup Plugin Index HTML

WARNING: This project is deprecated and no longer maintained. See @open-wc/rollup-plugin-html and @open-wc/rollup-plugin-polyfills-loader for replacements.

Rollup plugin to make rollup understand your index.html.

Part of Open Web Components: guides, tools and libraries for modern web development and web components

Takes in a standard index.html:

1<html lang="en-GB">
2  <head>
3    <title>My app</title>
4    <style>
5      my-app {
6        display: block;
7      }
8    </style>
9  </head>
10
11  <body>
12    <h1>
13      <span>
14        Hello world!
15      </span>
16    </h1>
17    <my-app></my-app>
18
19    <script>
20      (function () {
21        var message = 'hello inline script';
22        console.log(message);
23      })();
24    </script>
25
26    <script type="module" src="./app.js"></script>
27  </body>
28</html>

Extracts any <script type="module" src="..."> and feeds them to rollup as entry point(s)
Outputs the same index.html with updated file hashes and all inline HTML, CSS and JS minified:

1<html lang="en-GB">
2  <head>
3    <title>My app</title>
4    <style>
5      my-app {
6        display: block;
7      }
8    </style>
9  </head>
10  <body>
11    <h1><span>Hello world!</span></h1>
12    <my-app></my-app>
13    <script>
14      console.log('hello inline script');
15    </script>
16    <script src="app.202933f045cc9f6cdf51.js"></script>
17  </body>
18</html>

Optionally adds a loader script for conditionally loading polyfills and/or a separate build for older browsers.

Note that only module scripts with a src attribute are used as entrypoints, regular scripts and inline modules are minified but not parsed by rollup.

Usage

To use this plugin, add it to your rollup configuration and set your index.html as entrypoint:

1const path = require('path');
2const indexHTML = require('rollup-plugin-index-html');
3
4module.exports = {
5  input: path.resolve(__dirname, './index.html'),
6  plugins: [indexHTML(config)],
7};

Configuration

Polyfills

Note when using @open-wc/building-rollup many polyfills are already configured for you.

Depending on which browser you need to support you may need to polyfill certain browser features. To keep your bundles small, we don't serve any polyfills by default. You can enable polyfills in the configuration.

When enabling polyfills a small loader script is injected to your index.html. Polyfills are loaded based on feature detection. This causes a small delay in loading your app. We mediate this by adding a preload link during the build.

To enable polyfills:

1indexHTML({
2  polyfills: {
3    coreJs: true,
4    regeneratorRuntime: true,
5    webcomponents: true,
6    fetch: true,
7    intersectionObserver: true,
8  },
9});

core-js polyfills many language features such as Promise, Symbol and String.prototype.includes. regeneratorRuntime is necessary when you compile async await code which is transpiled to javascript ES5. These two polyfills are mainly for supporting legacy browsers. They are only loaded on browsers which don't support modules, such as IE11.

The rest of the polyfills target specific browser features, see their documentation for more info:

If you need a polyfill which is not on this list, consider creating an issue so that we can add it. You can also specify custom polyfills:

1indexHTML({
2  polyfills: {
3    coreJs: true,
4    customPolyfills: [
5      {
6        // the name of your polyfill
7        name: 'my-feature',
8        // expression which is run in the browser to determine if the polyfill should be loaded
9        test: "'myFeature' in window",
10        // path to your polyfill
11        path: require.resolve('my-feature-polyfill/dist/bundled.js'),
12        // path to the sourcemaps of your polyfill. optional
13        sourcemapPath: require.resolve('my-feature-polyfill/dist/bundled.js.map'),
14      },
15    ],
16  },
17});

Multi (legacy and modern) build

Note when using @open-wc/building-rollup/modern-and-legacy-config the multi build is already configured for you

If you need to support non-modern browsers, such IE11 or older versions of chrome, safari and firefox, it's better to create multiple builds of your app.

You can make one build for modern browsers using modern syntax and features, and one build for legacy browsers compiled to javascript ES5 and with more polyfills loaded. This way you don't penalize all your users for your lowest browser target.

To create multiple rollup builds, export an array of rollup configs instead of a single config. Set the multiBuild option in both instances of the plugin and set legacy option in the legacy build:

1const path = require('path');
2const indexHTML = require('rollup-plugin-index-html');
3
4module.exports = [
5  {
6    entry: path.resolve(__dirname, './index.html'),
7    plugins: [
8      indexHTML({
9        multiBuild: true,
10        polyfills: {
11          coreJs: true,
12          regeneratorRuntime: true,
13          webcomponents: true,
14        },
15      }),
16    ],
17  },
18
19  {
20    entry: path.resolve(__dirname, './index.html'),
21    module: {
22      rules: [
23        // Note: You will probably also want to configure babel for the legacy build.
24        // this is not a complete example, you will need to add more configuration for babel
25        { test: /\.js/, use: { loader: 'babel-loader' } },
26      ],
27    },
28    plugins: [
29      indexHTML({
30        multiBuild: true,
31        legacy: true,
32      }),
33    ],
34  },
35];

For the legacy build you do not need to configure any polyfills, as these are already injected by the modern build.

You will probably need to use babel as well to transpile your code to ES5. Remember to change the browser targets for the modern and legacy build accordingly. For example latest 2 of the major browsers for modern and IE11 for the legac build.

Minification

We use html-minifier for minifcation with a default configuration. You can adjust this configuration by passing a minify object:

1indexHTML({
2  minify: {
3    // minify options
4  },
5});

The options object is passed as is to html-minifier. See the documentation of html-minifier for all possible minification options.

It is also possible to turn off minification completely by passing minify:

1indexHTML({
2  minify: false,
3});

Non index.html entrypoints

You can use this plugin without an index.html plugin if you still want to make use of the polyfilling features. You can do this by adding a custom template function:

1const path = require('path');
2const indexHTML = require('rollup-plugin-index-html');
3
4module.exports = {
5  entry: path.resolve(__dirname, './my-app.js'),
6
7  output: {
8    filename: '[name].[chunkhash].js',
9    chunkFilename: '[name].[chunkhash].js',
10  },
11
12  plugins: [
13    indexHTML({
14      template: ({ assets, entries, legacyEntries, variation }) => `
15        <html>
16          <head></head>
17          <body></body>
18        </html>
19      `,
20    }),
21  ],
22};

CSP

When loading polyfills we inject a small script in your index.html. If you need CSP you can separate the script in a separate file:

1const path = require('path');
2const indexHTML = require('rollup-plugin-index-html');
3
4module.exports = {
5  entry: path.resolve(__dirname, './my-app.js'),
6
7  output: {
8    filename: '[name].[chunkhash].js',
9    chunkFilename: '[name].[chunkhash].js',
10  },
11
12  plugins: [
13    indexHTML({
14      polyfills: {
15        webcomponents: true,
16      },
17      loader: 'external',
18    }),
19  ],
20};

The template function receives the project's assets and entries. If applicable it also receives the legacyEntries and variation.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

6

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 6

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/canary.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/canary.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/canary.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/lint.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/lint.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/preview.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/preview.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/preview.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-node.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/verify-node.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-node.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/verify-node.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-node.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/verify-node.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-node.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/verify-node.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-node.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/verify-node.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-node.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/open-wc/open-wc/verify-node.yml/master?enable=pin
Info: 0 out of 15 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 7 out of 7 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

55 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-28mc-g557-92m7
Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-rrr8-f88r-h8q6
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-9pv7-vfvm-6vr7
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
Warn: Project is vulnerable to: GHSA-45rm-2893-5f49
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-p493-635q-r6gr
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

4.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More