/ Tips

Using babel-env to automatically polyfill Javascript

This may not be the lightest way of adding in polyfills but it is very very easy.

  • npm i --save babel-polyfill babel-preset-env

  • Tweak your webpack.config.json so that your js rule includes this:

use: {
    loader: 'babel-loader',
    options: {
        presets: [
            [
                'env',
                {
                    targets: {
                        browsers: ['ie 9'],
                    },
                    useBuiltIns: true,
                    loose: true,
                },
            ],
        ],
    },
}
  • And add import 'babel-polyfill' at the top of your app.js

Webpack & Babel will now polyfill where necessary to support down to IE9.
Here's Babel's documentation on babel-preset-env. For more information on the targets property you can look to browserlist for supported queries.

At time of writing, this method does not polyfill experimental stage JavaScript, such as the Object spread operator {...}.

Using babel-env to automatically polyfill Javascript
Share this