I am learning how to use @babel/preset-env to ship browser polyfills needed for our clients. My understanding is that babel will send polyfills down if the client visiting the website is one of the target environments. And there seems to be two ways to specify the target environments: 1. browserlist 2. the targets option as in { "presets": [["@babel/preset-env", { "targets": "defaults" }]] }
But here are a few things I don't quite understand:
core-js. And adding polyfill seems like a build time process. what I don't quite understand is how babel is actually selecting which polyfills the client needs - is babel importing all polyfills at once and only applying it at runtime if it is needed or it is only importing needed polyfills at build time? If Babel doesn't select which polyfills to apply, then how does this happen during the runtime? Can someone explain this in detail to me?targets options to set the target environments or using browserlist to set the target environments? Further more, I am confused about the default query for targets. On babel's doc it saysBecause of this, preset-env's behavior is different than browserslist: it does not use the defaults query when no targets are found in your Babel or browserslist config(s). If you want to use the defaults query, you will need to explicitly pass it as a target:
So by only having { "presets": ["@babel/preset-env"] } won't give us the default query and we have to explicitly setting the target to defaults as in "presets": [["@babel/preset-env", { "targets": "defaults" }]]?
"@babel/preset-env" but doesn't have browserlist defined nor do I have { "targets": "defaults" } , am I still polyfilling anything or in this case we are not sending and polyfills?Babel is not selecting polyfills for your client, Babel only runs at the compiling stage, and generates the output files for you, now it's up to you whether you want to serve those files for all your clients or not. Babel is not running on your server, neither on the client-side, the only time it runs is on the building stage.
True, if you don't set your target, no target will be applied. It means that it babel will transform your latest code to support too many browsers that will increase your file size (or client-side performance), that's why they recommend specifying targets.
Just the opposite, in that case, Babel will transform way too much, by targeting specific targets, Babel will do less work and you will only support later versions of the browsers (as you specify).