@babel/preset-env目标环境配置与polyfill加载规则相关疑问

问题1：polyfill的筛选逻辑是构建时执行还是运行时执行？ #

首先明确：@babel/preset-env的polyfill注入逻辑完全是构建时执行的，没有内置运行时环境判断的逻辑，具体筛选规则由你配置的useBuiltIns参数决定：

• 当useBuiltIns设为entry时：你需要在项目入口手动写入import 'core-js'和import 'regenerator-runtime/runtime'，babel会将这两行全量导入的代码，替换为仅你指定的目标环境缺失的polyfill导入列表，不需要的polyfill会直接在构建阶段剔除，最终打包产物里只有目标环境需要的polyfill。
• 当useBuiltIns设为usage时：不需要手动导入core-js相关包，babel会自动遍历所有业务代码，检测你实际用到了哪些ES+ API，再结合目标环境判断这些API是否有原生支持，缺哪个就自动在对应的文件顶部注入对应polyfill的导入语句，连你没用到的polyfill都不会被打包，体积控制更精细。
  你提到的运行时判断逻辑不属于@babel/preset-env的能力范畴，那是独立的实现方案，比如polyfill.io动态服务、自定义环境判断按需加载脚本等，和babel的构建时筛选是两套不同的实现路径。

问题2：targets配置和browserslist配置的区别？是否必须显式配置targets为defaults才会启用默认规则？ #

两者的区别 #

本质上没有功能差异，仅优先级不同：@babel/preset-env的targets参数优先级高于项目的browserslist配置，如果你在preset-env的配置项里传入了targets，babel会直接使用这个配置，忽略项目内的.browserslistrc、package.json的browserslist字段等配置；只有当你没有配置targets时，babel才会去读取项目里的browserslist配置作为目标环境规则。

默认规则的问题 #

你的理解完全正确：只配置{ "presets": ["@babel/preset-env"] }不会触发defaults查询规则，必须显式写入{ "presets": [["@babel/preset-env", { "targets": "defaults" }]] }才会使用browserslist的defaults规则匹配目标环境。 #

问题3：既没有配置browserslist也没有配置targets时，会注入polyfill吗？ #

这种情况下@babel/preset-env会默认假设你的目标环境支持所有最新的ES特性，不会注入任何polyfill，也不会对高版本语法做降级处理，你写的ES6+代码会几乎原封不动的输出到构建产物里。 #

内容的提问来源于stack exchange，提问作者Joji