JSPM

  • Created
  • Published
  • Downloads 498
  • Score
    100M100P100Q102153F
  • License MIT

browser feature polyfills as a babel plugin

Package Exports

  • @mrhenry/babel-plugin-core-web

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mrhenry/babel-plugin-core-web) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-core-web

Babel plugin that polyfills browser features.

Bringing polyfill.io to your babel flow.

version Build BrowserStack Status

why

Maintaining a correct but minimal polyfill bundle from polyfill.io is a manual process and prone to errors. Babel however knows which features you actually used and the environment you are targetting. Bringing the two together works for us, we hope it does for you too.

What is not included is a way to serve different bundles to different browsers. There are many ways to do this and we are working on some recipes for this.

install

npm install --save-dev @mrhenry/babel-plugin-core-web
yarn add --dev @mrhenry/babel-plugin-core-web

Example with script tags (module vs nomodules)

example migration

babel.config.js

module.exports = function(api) {
    api.cache(true);
    return {
        plugins: [
            ["@mrhenry/core-web", {
                browsers: {
                    chrome: "31",
                    firefox: "26",
                    edge: "12",
                    opera: "26",
                    safari: "8",
                    ie: "11",
                }
            }]
        ]
    };
};

webpack config

const babelPresetEnv = require( '@babel/preset-env' );

...

{
    loader: 'babel-loader',
    options: {
        comments: false,
        plugins: [
            [
                '@mrhenry/core-web',
                {
                    browsers: {
                        chrome: "63",
                        firefox: "57",
                        edge: "18",
                        opera: "57",
                        safari: "12",
                        ie: "11",
                    },
                },
            ],
        ],
        presets: [
            [
                babelPresetEnv,
                {
                    corejs: '^3.6.3',
                    targets: {
                        browsers: ...,
                    },
                    useBuiltIns: 'usage',
                },
            ],
        ],
    },
}

issues

If have any trouble using babel-plugin-core-web please open an issue here. We will try to get back to you as soon as possible.

missing polyfills

If a polyfill is missing from this plugin please open an issue here.

We do take the specification status into consideration before adding new polyfills.