core-js@3 如何让 Babel polyfill 不再踩坑？一份完整选型指南

core-js@3 如何让 Babel polyfill 不再踩坑？一份完整选型指南

【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js

@babel/polyfill弃用后，入口文件里那行import该换成什么？core-js@3 发布后，Babel polyfill 的链路被重构了：先在三选一 npm 包，再调 preset-env 两个选项。本文按“包 → 选项 → 选型”一路讲清，不绕弯。

先看清三个包

core-js不是一个包，而是一套三包分工：

包	定位	适用场景
core-js	直接改写Promise、Array等全局内置，体积约 500KB	Web 应用主项目，入口直接import
core-js-pure	实例方法风格（如_.flat([1,2])），不碰全局命名空间	发布到 npm 的共享库，不能污染消费方
core-js-bundle	预先打包好的全局版	无打包器的浏览器<script>环境

模块命名同样有章法：es.前缀代表已定稿的标准，esnext.代表仍在讨论中的提案，web.代表 WHATWG/W3C 跨平台特性。看名字就能判断成熟度，这是它模块化设计的核心好处。

这次版本拿到了什么

状态	代表特性
✅ 已落地（es.）	ES2015 的@@isConcatSpreadable、@@species；ES2018 的Array.prototype.flat/flatMap；ES2019 的Object.fromEntries、Symbol.prototype.description
🧪 试验中（esnext.）	globalThis（已至 stage 4）、Promise.allSettled（stage 4）、Promise.any（stage 3）、String.prototype.replaceAll（stage 3）、Set 操作方法（stage 2）、String.prototype.codePoints、Array.prototype.lastItem/lastIndex（stage 1）
🌐 跨平台（web.）	完整实现URL/URLSearchParams、标准微任务方法queueMicrotask、给 DOM 集合补上.forEach

试验区不是摆设——它正是 Babel preset-env 的注入数据源，注入哪些特性由 core-js-compat 的版本数据决定，而非写死的清单。注意globalThis与Promise.allSettled已升到 stage 4，工程上可以直接当稳定特性用。web.线补齐了URL在旧环境的缺口，这是过去很多项目头疼的点。

和 Babel 配合的三处要点

弃用的 @babel/polyfill 怎么替

入口里换两行即可：

import "core-js/stable"; import "regenerator-runtime/runtime";

preset-env：corejs 与 useBuiltIns 怎么选

先把corejs从默认值2显式改为3——polyfill 数据源已从 compat-table 换成 core-js-compat，目标环境检测因此更准。

选项	作用	适用场景
useBuiltIns: "entry"	入口写import "core-js/es"（可加core-js/proposals/set-methods等），Babel 按目标自动裁剪不需要的模块	想显式控制注入面，尤其要引入 proposals 时
useBuiltIns: "usage"	扫描源码按需注入，Babel 7.4 起更可靠，另有proposals选项打开 esnext 特性	追打包体积，配置越少越好

// babel.config.js 里 preset-env 部分 { corejs: 3, useBuiltIns: "usage" }

我的推荐：应用项目直接用usage；团队在用proposals特性或需要审计 polyfill 范围，再切entry。

实例方法隔离：@babel/runtime-corejs3

把@babel/runtime换成@babel/runtime-corejs3，实例方法 polyfill 走 core-js-pure，不碰全局，还修复了Symbol.iterator提取之类的历史问题。

三分钟选型

你的项目情况	推荐方案
Web 应用主项目，要兼容旧浏览器	入口import "core-js/stable"+ preset-envcorejs: 3, useBuiltIns: "usage"
追首屏体积	usage 模式 + 收紧 browserslist，把够不到的老浏览器删掉
写 npm 库，绝不能污染使用方全局	@babel/runtime-corejs3（底层即 core-js-pure）
无打包器，纯<script>	直接引入 core-js-bundle

core-js@3 的意义不止是补特性，而是把 Babel polyfill 链路变成了可配置、可裁剪的系统。下一步：打开你的项目，把import "@babel/polyfill"换成文首两行，再把 preset-env 的corejs改成3。

【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js