Babel是否会Polyfill已存在但不符合目标标准的旧JavaScript特性？

结论 #

默认配置下的Babel不会自动修补已存在但行为不符合ES2020规范的Object.keys实现，你无法直接信任所有目标环境下的Object.keys都遵循ES2020的枚举顺序规则。

原因说明 #

• Babel默认的polyfill逻辑（无论是@babel/preset-env搭配core-js的自动按需引入，还是手动引入polyfill），默认只会补全完全不存在的API，不会主动覆盖浏览器已有的原生实现，哪怕原生实现的行为不符合更新的规范要求。因为覆盖原生API存在性能损耗、和其他代码冲突的风险，这是前端polyfill工具的通用设计原则。
• 如果你确实需要在所有环境下保证Object.keys的枚举顺序完全符合ES2020规范，需要手动替换全局的Object.keys，或者在业务代码中使用符合规范的第三方实现替代原生Object.keys调用，比如可以用core-js提供的纯函数版本：import keys from 'core-js-pure/stable/object/keys'，用这个导出的方法替代原生调用就能保证所有环境下行为一致。

示例验证 #

你提到的Firefox 4.0.1版本已经实现了Object.keys，但顺序不符合ES2020要求：

> var fruit = {"banana": 1, "apple": 2, "tomato": 3, 100: 4}
> Object.keys(fruit)
>>> ["banana", "apple", "tomato", "100"]

而符合ES2020规范的实现（比如Firefox 88.0.1）返回结果如下：

> var fruit = {"banana": 1, "apple": 2, "tomato": 3, 100: 4}
> Object.keys(fruit)
>>> Array(4) [ "100", "banana", "apple", "tomato" ]

如果你使用默认的Babel配置打包代码到Firefox 4.0.1环境运行，Object.keys仍然会返回不符合规范的顺序，Babel不会自动修正这个行为。

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