Add babel option to pre-include polyfills

[ihmels]

This PR adds an polyfills option to Encore.configureBabel() to configure the include option of @babel/preset-env. It's inspired by the polyfills option of @vue/babel-preset-app.

This option is useful to include polyfills that are required by project dependencies and therefore cannot be covered by useBuiltIns: 'usage'.

[Lyrkan]

Hi @ihmels,

Thank you for opening this PR.
I kind of agree that we should add a way to set include (and exclude maybe?) but I'm less convinced by the use case you are describing (which is important since the "why" should be explained in the doc) and the name of that new option.

If a dependency requires polyfills it should probably be handled by includeNodeModules (or by changing the exclude rule). The reasons for that are:

• you'd have to know the code of that dependency in order to know which polyfills need to be added (which is probably not the case most of the time)
• Babel doesn't only handle polyfills and if the dependency requires syntax changes (for instance if it uses the class keyword and you're targeting IE11) it won't be covered

The description of include given in the documentation @babel/preset-env is a bit more realistic I think:

An array of plugins to always include
(...)
This option is useful if there is a bug in a native implementation, or a combination of a non-supported feature + a supported one doesn't work.

Also, could you also add some tests to check that it works as expected?

[ihmels]

I'm not of the opinion that it should be handled by includeNodeModules if a dependency requires a polyfill to work, because it does not follow that I also want to transpile that dependency.

But I think it is a good idea to add a way to set include and exclude in general. Do you have an idea how the two options can be called? I was thinking about includeEnvPlugin and excludeEnvPlugin. Actually, a more general solution would be better to configure @babel/present-env with an additional method like configureBabelPresetEnv() or so.

[Lyrkan]

I'm not of the opinion that it should be handled by includeNodeModules if a dependency requires a polyfill to work, because it does not follow that I also want to transpile that dependency.

That's my point, if a dependency requires a polyfill to work you already know that it uses things that are not supported by your env, so it would be way safer to transpile it anyway.

And if you really know that you are only missing polyfills you should already be able to add them by importing individual core-js modules.

Do you have an idea how the two options can be called? I was thinking about includeEnvPlugin and excludeEnvPlugin

I can't find anything better right now, maybe just with the plural form instead since they'll most likely contain arrays?

Actually, a more general solution would be better to configure @babel/present-env with an additional method like configureBabelPresetEnv() or so.

Hmm... I'm not sure that's needed. For more advanced configurations having a babel.config.js/.babelrc.js file is probably a better choice (while writing this I'm even wondering if that shouldn't be the case for include/exclude as well).

[weaverryan]

Hmm... I'm not sure that's needed. For more advanced configurations having a babel.config.js/.babelrc.js file is probably a better choice (while writing this I'm even wondering if that shouldn't be the case for include/exclude as well).

The downside to that would be that you would now be responsible for configuring all of the Babel config (e.g. can't take advantage of us adding the react preset if you enable React).

BUT, I hear your point. Configuring the env preset is already possible, but ugly as you'd need to rely on the preset being on the 0 index.

Encore
    .configureBabel((babelConfig) => {
        babelConfig.presets[0][1].include = ['foo-plugin'];
    });

That's not great :). We DO expose some copy "options" as the second argument of configureBabel() (e.g. useBuiltIns), but trying to repeat ALL the preset-env options there is a bad idea and not what we intended.

If we're going to solve this, I think it would be via some sort of configureBabelPresetEnv() as @ihmels suggested. Otherwise, your options for configuring these less-common options include either (A) using configureBabel() with very ugly [0][0] keys or (B) using a babel.config.js file, and then not allowing Encore to handle the Babel config.

WDYT?

[ihmels]

I have created #642 that introduces the method configureBabelPresetEnv().