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:
- It seems like the polyfills are all coming from
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? - What are the differences between using the
targetsoptions to set the target environments or usingbrowserlistto set the target environments? Further more, I am confused about the default query fortargets. On babel's doc it says
Because 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" }]]?
- This relates to my second question - if I have a project that has
"@babel/preset-env"but doesn't havebrowserlistdefined nor do I have{ "targets": "defaults" }, am I still polyfilling anything or in this case we are not sending and polyfills?
from Babel/preset-env: confusion about setting target environment for shipping polyfills
No comments:
Post a Comment