# html-webpack-polyfill-runtime-plugin

> auto insert that generate runtime polyfill by webpack build js assets

Latest version **1.0.8** (published 2021-03-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install html-webpack-polyfill-runtime-plugin
pnpm add html-webpack-polyfill-runtime-plugin
yarn add html-webpack-polyfill-runtime-plugin
bun add html-webpack-polyfill-runtime-plugin
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2021-03-06 |
| First published | 2020-10-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 39.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | SzHeJason |
| Maintainers | hejason |

## Links

- npm: https://www.npmjs.com/package/html-webpack-polyfill-runtime-plugin
- Repository: https://github.com/SzHeJason/html-webpack-polyfill-runtime-plugin
- Homepage: https://github.com/SzHeJason/html-webpack-polyfill-runtime-plugin#readme
- Issues: https://github.com/SzHeJason/html-webpack-polyfill-runtime-plugin/issues
- npm.io page: https://npm.io/package/html-webpack-polyfill-runtime-plugin

## Dependencies (10)

- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.12.3
- [browserslist](https://npm.io/package/browserslist.md) ^4.14.5
- [query-string](https://npm.io/package/query-string.md) ^6.13.6
- [@types/webpack](https://npm.io/package/@types/webpack.md) ^4.41.24
- [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^9.0.2
- [@types/babel__core](https://npm.io/package/@types/babel__core.md) ^7.1.10
- [@types/browserslist](https://npm.io/package/@types/browserslist.md) ^4.8.0
- [create-polyfill-service-url](https://npm.io/package/create-polyfill-service-url.md) ^2.2.3
- [@financial-times/js-features-analyser](https://npm.io/package/@financial-times/js-features-analyser.md) ^0.4.2

## Recent versions

- 1.0.8 (latest) — 2021-03-06
- 1.0.7 — 2021-03-06
- 1.0.5 — 2021-03-06
- 1.0.4 — 2020-11-02
- 1.0.3 — 2020-11-02
- 1.0.2 — 2020-11-02
- 1.0.1 — 2020-10-31

## README

# HTML Webpack Polyfill Runtime Plugin

A [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) for auto injecting runtime polyfill script

This plugin make to you forget js polyfill 

## Install

```shell
# npm
npm install html-webpack-polyfill-runtime-plugin --save-dev
# yarn
yarn add html-webpack-polyfill-runtime-plugin -D
```

## Example

- [example/webpack4](https://github.com/SzHeJason/html-webpack-polyfill-runtime-plugin/tree/master/examples/webpack4)

webpack.config.js

````js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlPolyfillRuntimePlugin = require('html-webpack-polyfill-runtime-plugin');

module.exports = {
  entry: "./app.js",
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              targets: [
                'defaults',
                'Chrome > 33',
                'ios_saf > 7',
                'android > 4.4',
              ],
            }]]
          }
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(), new HtmlPolyfillRuntimePlugin()],
}
````

output html

```html
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <script
    src="https://polyfill.io/v3/polyfill.min.js?features=console,Function.prototype.bind,Map,Object.create,Object.defineProperty,Set,Symbol,Symbol.toStringTag"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <script src="main.js"></script>
</body>

</html>
```

### Process
![image](https://user-images.githubusercontent.com/20609396/110198464-a3e34080-7e8d-11eb-9db8-dc759a0efdbb.png)


### Build private runtime polyfill service 

The plugin use [polyfill.io](https://polyfill.io/v3/)  by deafult，but you can makeprivate runtime polyfill service by [js-polyfill-docker](https://github.com/3YOURMIND/js-polyfill-docker) and override plugin url

```js
// webpack.config.js
const HtmlPolyfillRuntimePlugin = require('html-webpack-polyfill-runtime-plugin')

module.exports = function() {
	...,
	plugins:[
		...，
    // position of the plugin is last
		new HtmlPolyfillRuntimePlugin({
			url(features){
				return `https//yourpolyfill.service.com/pathname?features=${features.join(,)}`
			}
		})
	]
	...,
}
```

---
_Source: https://npm.io/package/html-webpack-polyfill-runtime-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._