Where to find polyfill names to add to babel.config.js

Question

The babel docs link to github.com/zloirock/core-js to obtain polyfills which can be used. We are currently using es6.array.iterator, es6.promise, es7.promise.finally, es6.object.assign, es6.symbol, es6.map. These mostly line up with what's on the github page but are not listed directly.

However I now wish to add url and url-search-params but cannot work out what magic string to use in the babel config. Is there a list of all valid babel polyfills somewhere?

This is how our babel.config.js looks currently:

module.exports = {
    presets: [
        [
            '@vue/app',
            {
                polyfills: [
                    'es6.array.iterator',
                    'es6.promise',
                    'es7.promise.finally',
                    'es6.object.assign',
                    'es6.symbol',
                    'es6.map',
                ],
            },
        ],
    ],
    sourceType: 'unambiguous',
};

Answer 1

The docs of core-js at first glance doesn't provide a list per se, but after some reading I found this URL and SearchParams. According to this docs I think you should include web.url, web.url.to-json, web.url-search-params in your polyfills array to enable this features. However, I think there's a way to include core-js and then use something like browserlist to target only the browsers you need to support. Hope this helps you. Cheers, sigfried.

EDIT: For the sake of completion I've included the options I was talking about as you can see this is a React project but I think that with a little adjustement you can make this work in a Vue.js project.

EDIT #2: I think this is the list we were looking for :) Core-JS Polyfills

babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": ["last 2 versions", "not dead", "not < 2%"],
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

app.js

import React from 'react'
import '@babel/polyfill'
import ReactDOM from 'react-dom'

import App from './App'
import DefaultErrorBoundary from './DefaultErrorBoundary'
import './main.scss'

if (process.env.NODE_ENV === 'development') {
  const axe = require('react-axe')
  axe(React, ReactDOM, 1000)
}

ReactDOM.render(
  <React.StrictMode>
    <DefaultErrorBoundary>
      <App />
    </DefaultErrorBoundary>
  </React.StrictMode>,
  document.getElementById('app')
)