Understanding the bundles, lib, lib-esm and iife folders

Some libraries/frameworks when build/prepare the application for publishing.

They generate a folder structure in the dist folder with the folders: bundles, lib, lib-esm or iife.

Here’s the first question: What is the purpose of these folders?

Reading about it, I understood that the outputs are generated in this folder structure for greater compatibility of use. But I can’t say with absolute certainty if this is really the case (It’s impressive the number of posts/tutorials that say you must and how to generate these folders, but don’t explain why).

Now, the second question: How does the project that imports this package know which folder structure to use? Example: How does a browser know that it has to use the bundles folder and not lib-esm? Or, how does Nodejs know that it has to use lib and not lib-esm?

Finally, thinking about using Typescript and debugging the package. The last question: When the package is published (production environment), should the type definition files and source maps be included in the output? If so, where should they be generated? In bundles? Lib? Lib-esm? In all folders?