Does the plugin work with babel.config.js and browserslist ?

[martinbroos]

My @babel/present-env is defined in a babel.config.js file but it seems it cannot read this because it giving me w warning 'Adding @babel/preset-env because it was not found'

My targets are defined in a .browserslistrc and i'm not sure if this is used by the babel preset that is added by this plugin.

It does generate a .es6 file but this does not contain classes and const variables so my guess is that this is not a esm build.

[martinbroos]

I think the reason there is no generated es6 is because when babel-preset is not found it's adding a config which has no key with bugfixes = true

Compare:
https://github.com/prateekbh/babel-esm-plugin/blob/master/src/babel-utils.js#L37
with:
https://github.com/prateekbh/babel-esm-plugin/blob/master/src/babel-utils.js#L27

[prateekbh]

oh right! do you wanna PR that?

[martinbroos]

@prateekbh see pr: #44
Still not sure how I can make the plugin also check babel.config.js for existing options. I think what we want is that it only sets the esmodules setting to true and leaves resolving existing settings to babel. As this can be done with config files which come in various formats. Or by defining them in the loader rule.

[martinbroos]

@prateekbh I'm still thinking about how we could make this work with the various ways to configure babel. Do you know if it's possible to expose a variable inside the plugin that you can use in the targets config. That way we no longer have to set preset targets. In babel.config.js we could then use:

            require.resolve('@babel/preset-env'),
            {
                useBuiltIns: 'usage',
                targets: {
                    esmodules: isEsmBuild,
                },
                bugfixes: isEsmBuild,
            },

Or is this in your view not possible ? My hope is that the plugin could supply the variable when starting the webpack child process that generates the esm build.

I might be going the wrong way with this so if anyone has an idea that would be very helpful.

[prateekbh]

@martinbroos I dont think this needs to check babel.config.js. What this does is that in its compilation its sets option of babel-loader to a set value which is

targets: {
                    esmodules: isEsmBuild,
                },
                bugfixes: isEsmBuild,

So now the child compilation will be of ES6 variant

[martinbroos]

I think there are two reasons why we need to check for config files at the moment:

1. If there is no babel-loader targets option is found the plugin will create it's own. So there is no merge for existing settings that are possibly defined in a config file.

2. These settings define how polyfills are handled so if the es6 child compilation has no useBuiltIns setting and the main build process looks at a config file that has one we are possibly missing important polyfills in the es6 build.

Ideally we could only set the esmodules option to true without touching the preset options but i'm not sure if this is possilble, maybe with a cli command of babel. In that case we let babel resolve what config settings are used.