启用 useBuiltIns: 'usage' 并配 targets 和 corejs: 3，Babel 会自动按需注入 core-js 和 regenerator-runtime 的 polyfill，无需手动 import，避免全局污染。

只要在 @babel/preset-env 里打开 useBuiltIns: 'usage'，并明确指定 corejs: 3，Babel 就会自动扫描代码里真正用到的那些新 API。

比如 Promise.allSettled、Array.from、Object.assign 这类能力，都会按需引入对应的 core-js polyfill 模块。

这样做的好处很直接：该补的才补。不会顺手把全局作用域一起“刷一遍”，也不会多塞哪怕一点用不上的补丁。

核心配置项必须齐全

仅靠 useBuiltIns: 'usage' 不够，下面三个字段要一起配：

• targets：明确告诉 Babel 支持哪些浏览器或 Node 版本，它才知哪些 API 原生已支持、哪些需要补
• useBuiltIns: 'usage'：开启按需注入，Babel 会扫描源码里每个 API 调用，自动加 import 'core-js/stable/xxx'
• corejs: 3：固定用 core-js v3（v2 已停止维护），值可以是 3 或 { version: 3, proposals: true }（后者还包含 Stage 3 提案）

代码里不用手动 import core-js

启用 useBuiltIns: 'usage' 之后，入口文件里就没必要再手动写 import 'core-js/stable' 或 import 'regenerator-runtime/runtime' 了。

Babel 会按实际使用情况自动补齐。代码里一旦用到 async/await，就会在对应位置插入 regenerator-runtime；如果用到了 Promise.finally，它也会顺手把 core-js/stable/promise/finally 自动加上。

示例代码

例如这段代码：

const arr = Array.from(new Set([1, 2, 2]));
async function fetchAll() { return await Promise.allSettled([]); }

Babel 会分别注入：

import "core-js/stable/array/from";
import "core-js/stable/promise/all-settled";
import "regenerator-runtime/runtime";

避免常见坑

• 不要混用 entry 和 usage：二者互斥，entry 是全量引入，usage 是精准注入，选一个即可
• 确保安装了 core-js@3：npm install core-js@3 regenerator-runtime，v4 尚未被 @babel/preset-env 最新支持
• 注意模块解析路径：如果项目用了别名（如 @/），确保构建工具（Webpack/Vite）能正确解析 core-js/stable/... 这类路径
• 不推荐全局垫片：像 import 'core-js/stable' 会污染全局对象，影响第三方库行为，usage 模式天然规避这个问题

完整 babel.config.js 示例

这是生产环境推荐的最小可行配置：

module.exports = (api) => {
api.cache(true);
return {
presets: [
['@babel/preset-env', {
targets: { chrome: '87', ie: '11' },
useBuiltIns: 'usage',
corejs: 3
}],
],
};
};

《夸克》非常好用的免费AI浏览器

下载APP查看