Babel 如何玩转 core-js3终极指南【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js还在为 build 产物里塞满用不上的 polyfill 头疼花 10 分钟读完咱们把 core-js3 和 Babel 的配合一次讲透entry 还是 usage、全局还是纯函数选完直接动手。先定位问题polyfill 到底在替你扛什么新代码爱用新 APIObject.fromEntries、Set的求并求差、structuredClone换到老浏览器一跑页面直接白屏 。自己手写兜底那是在重复造轮子。core-js 就是干这个的JavaScript 标准库的 polyfill 集合。三个特质决定了你怎么用它模块化一个功能一个模块要哪个引哪个不用整包吞下可纯函数化不想污染全局命名空间有专门版本一个全局变量都不碰覆盖广最新 ECMAScript 标准、还在讨论的提案以及URL、queueMicrotask这类 WHATWG/W3C 相关 API 都能补你可能早就在用它了——不少框架和构建工具内部就在悄悄注入 core-js只是没人告诉你怎么选包、怎么配。下面逐个拆。core-js 三个包到底怎么选v3 把代码库拆成了三个包对应三种诉求包干什么的碰全局吗什么时候选它core-js全局 polyfill总量约 500KB是应用入口一次性补全core-js-pure独立模块版否写库/组件配合babel/runtime-corejs3core-js-bundle预打包好的全局版是不想自己管依赖直接引 命名上也有讲究稳定标准的功能用es.前缀比如es.promise.any讨论中的提案用esnext.前缀比如esnext.array.group-by。引的时候一眼能看出这个 API 是板上钉钉还是还在路上。另外 v3 把过时和非标准的功能清掉了不再用 LiveScript代码全部用现代 ES 语法重写polyfill 的侵入等级还能配置——polyfill 本身也变干净了。useBuiltIns 模式配置实战corejs 选项默认 2记得改成 3babel/preset-env有个corejs选项指定你用的 core-js 大版本。它的默认值还是 2。如果你升到了 v3 却忘了改它生成的模块映射就是错的这基本是迁移时必踩的坑 ⚠️。{ presets: [ [babel/preset-env, { corejs: 3, useBuiltIns: usage }] ] }配好之后preset-env 的数据源也从旧的 compat-table 切到了core-js-compat。它直接读 core-js 自带的模块元数据加特性兼容表判断某个 API 在目标环境里缺不缺。补什么、补多少全靠真实数据不再拍脑袋。polyfill 的注入顺序也重新排过依赖更稳。entry 还是 usage一张表说清模式你的动作适合谁entry入口文件手写总 importBabel 按 targets 裁剪想可控、方便排查依赖的团队usage什么都不写Babel 扫代码按需注入想省心、体积自动最优的项目// entry 模式入口文件写全量入口即可 import core-js/es; import core-js/proposals/set-methods;entry 模式下这种全量写法会被 Babel 根据 browserslist 优化成真正缺的那几个模块。大胆写全体积它兜底。usage 模式从 Babel 7.4 起变得相当可靠polyfill 检测更准语法特性相关的也能跟着注入proposals选项还能把提案功能纳入统计。还有个历史遗留babel/polyfill已经弃用别再引了。手动引入的话换成这两行import core-js/stable; import regenerator-runtime/runtime;babel/runtime-corejs3实例方法 polyfill 的归宿再解决一个隐形痛点。默认配置下babel/plugin-transform-runtime把arr.map(...)这类实例方法编译成共享 helper 时会动到原型链。多个库同时注入就可能互相踩。babel/runtime-corejs3就是解药 它底层用的是core-js-pure每个方法独立成模块不碰全局原型。你只需要在 transform-runtime 里声明 corejs 版本{ plugins: [ [babel/plugin-transform-runtime, { corejs: 3 }] ] }它还支持proposals选项把提案 API 也纳入转写顺带修掉了Symbol.iterator提取这类历史 bug。分工很清楚全局补全交给core-js实例方法交给babel/runtime-corejs3两边互不干扰。迁移 Checklist照着勾就行检查babel/preset-env的corejs已设为 3别让它停在默认值 2删掉babel/polyfill引用改用core-js/stable或 usage 模式写库/组件的项目换用core-js-purebabel/runtime-corejs3守住全局命名空间配好 browserslist跑一次构建确认 usage 模式下的产物确实变小了提案功能用core-js/proposals/*按个引入别整个吞esnext【免费下载链接】core-jsStandard Library项目地址: https://gitcode.com/GitHub_Trending/co/core-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考