Polyfills for React 16 (Map/Set/requestAnimationFrame)

[insin]

What's the best way to include these?

• Add to the React project skeleton? Wouldn't work for nwb react [run|build]
• Add extra polyfills to the Webpack entry point for react projects?

Should they be included by default or should you have to opt-in?

Is there anything like polyfill.io you can run locally to include selected polyfills for a range of target browsers?

It feels like that would be the nicest approach given that autoprefixer and babel-preset-env both support specifying supported browser ranges.

[wmertens]

You can actually run polyfill.io locally :) https://github.com/Financial-Times/polyfill-service#running-locally

I'm thinking about https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ to make 2 bundles, one for modern browsers and one for older, and just use the babel-preset-env auto-polyfilling technique…

[quorak]

what is the best way to include these. I tried:

{
  babel: {
    env: {
      'targets': {
        'browsers': [
          'last 2 versions',
          'safari >= 7',
          'android >= 4.4',
          'ie >= 9'
        ]
      },
      'debug': true,
      'include': ['es6.map', 'es6.set', 'es7.array.includes']
    }
  }
}

but it does not help.

[insin]

@quorak check out the React docs on JavaScript Environment Requirements, adding core-js as a dependency and importing the polyfills you want in your entry module is the easiest way to go.

Not sure what Babel config that is, looks like some of the old Babel 5 stuff 😸