企业官网建设流程全解析

@babel/preset-env 与 @babel/runtime 同时配置 corejs 选项导致冲突怎么解决

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

在 Babel 项目中，如果同时启用了@babel/preset-env（useBuiltIns+corejs）和带corejs选项的@babel/runtime（transform-runtime），两边都会各自向项目注入 core-js 的 polyfill。core-js 项目文档明确警告：这种重复功能配置会造成冲突（it's duplicate functionality and will cause conflicts），解决方式是把corejs选项只保留在一处。本文依据 使用文档 与 README 中的说明，给出定位冲突、二选一保留、以及用构建产物核对结果的完整路径。适用前提：项目以 core-js@3 作为 polyfill 来源，且 Babel 配置中同时出现了这两种注入方式。

为什么两边都配 corejs 会冲突

先确认两个工具各自的职责，才能理解冲突的来源：

• @babel/preset-env：useBuiltIns选项用于优化全局版core-js的使用。文档要求启用useBuiltIns时必须同时设置corejs选项，指向所用 core-js 的版本，如corejs: '3.50'。useBuiltIns: 'entry'会把import 'core-js/...'入口替换为目标环境实际需要的core-js/modules/...子集；useBuiltIns: 'usage'会在每个文件顶部自动注入该文件用到、且目标环境不支持的特性对应的 polyfill import。
• @babel/runtime：带corejs: 3选项时，把标准库特性调用改写为对core-js-pure（不污染全局命名空间的版本）的 import，无需手写import ... from 'core-js-pure/...'。

两者做的是同一件事——为代码补上 polyfill。文档给出的原话警告（见 docs/web/docs/usage.md 的@babel/runtime一节）：

If you use@babel/preset-envand@babel/runtimetogether, usecorejsoption only in one place since it's duplicate functionality and will cause conflicts.

因此问题判定很直接：检查 Babel 配置，只要 preset-env 侧配了useBuiltIns+corejs，而 transform-runtime 侧又配了corejs，就是冲突组合，无需等到运行时出错才排查。下面按"保留哪一边"分两条路径处理。

方案 A：保留@babel/preset-env，去掉 transform-runtime 的corejs

适合需要全局版 polyfill、或已用import 'core-js/stable'等入口的项目。

1. 安装全局版 core-js（文档给出的命令）：

npm install --save core-js@3.50.0

2. Babel 配置中只保留 preset-env 一侧的corejs，transform-runtime 侧删除corejs选项。文档说明的选项取值组合如下：

module.exports = { presets: [ ['@babel/preset-env', { useBuiltIns: 'usage', // 文档给出的两种模式之一；'entry' 同样支持 corejs: '3.50', }], ], // @babel/plugin-transform-runtime 不再设置 corejs 选项 };

3. 按文档要求注意两点：
   • 文档明确建议写 minor 版本（corejs: '3.50'）而不是corejs: 3，因为corejs: 3不会注入后续 minor 版本新增的模块。构建后发现个别特性没有 polyfill 时，先检查这里。
   • 使用useBuiltIns: 'usage'时不要再手动添加core-jsimport，文档说明它们会自动加入：you should not add core-js imports by yourself, they will be added automatically。
   • 需要 polyfill 提案特性时，按文档示例改用corejs: { version: '3.50', proposals: true }。

方案 B：保留@babel/runtime，去掉 preset-env 的useBuiltIns与corejs

适合希望避免全局命名空间污染（pure 模式）的项目。

1. 安装 pure 版 core-js（文档给出的命令）：

npm install --save core-js-pure@3.50.0

2. 由于文档规定useBuiltIns必须搭配corejs选项使用（With useBuiltIns option, you should also set corejs option），要让corejs只留在 runtime 一侧，preset-env 侧必须把useBuiltIns和corejs一起去掉，只保留targets等其他选项：

module.exports = { presets: [ ['@babel/preset-env', { // 不再设置 useBuiltIns 与 corejs targets: '> 0.25%, not dead', }], ], plugins: [ ['@babel/plugin-transform-runtime', { corejs: 3, }], ], };

3. @babel/runtime默认只 polyfill 稳定特性；需要提案特性时按文档示例改为corejs: { version: 3, proposals: true }。

如何核对修复结果

重新构建项目，检查产物中的 polyfill 注入形态，应与所保留一侧的文档示例一致。以下均为文档示例（目标环境不同会得到不同的模块列表），用于确认注入路径，不是必须逐字匹配的固定输出：

• 保留 preset-env 的entry模式（文档示例，chrome 71目标）：import 'core-js/stable'被替换为按需的模块列表——

import 'core-js/modules/es.array.unscopables.flat'; import 'core-js/modules/es.array.unscopables.flat-map'; import 'core-js/modules/es.object.from-entries'; import 'core-js/modules/web.immediate';

• 保留 preset-env 的usage模式（文档示例，目标含IE 11）：文件顶部自动出现所需模块 import——

import 'core-js/modules/es.array.iterator'; import 'core-js/modules/es.object.to-string'; import 'core-js/modules/es.set'; var set = new Set([1, 2, 3]);

• 保留@babel/runtime路径（文档示例，来自 项目发布说明文章）：array.includes(something)被改写为从@babel/runtime-corejs3的 import——

import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes"; _includesInstanceProperty(array).call(array, something);

核对要点：产物中的注入来源只应来自你保留的那一侧——方案 A 下应看到core-js/modules/...形式的注入，方案 B 下应看到@babel/runtime-corejs3/...形式的 import，而不是一侧同时出现两种来源。

文档明确的限制

• @babel/runtime不能按目标环境裁剪：文档（2019 年说明文章 的 "@babel/runtime for target environment" 一节）指出，当时无法像@babel/preset-env那样为@babel/runtime设置目标环境，即使目标是现代引擎也会注入所有可能的 polyfill，增加最终包体积；作者计划未来基于core-js-compat的数据为@babel/runtime增加目标环境编译支持，并给@babel/preset-env增加useBuiltIns: runtime选项。选择方案 B 时要把这一点计入包体积预算。
• 加载位置：文档警告，若使用core-js扩展原生对象，建议把所有core-js模块加载在应用入口顶部，否则可能产生冲突。
• 两个工具默认都只处理稳定特性，提案 polyfill 都需要显式开启proposals选项，这一点在两侧行为一致。

如果目标不仅是消除冲突，还要按特定引擎进一步裁剪 polyfill 集合，文档指出可以用core-js-builder包排除部分特性或生成面向目标引擎的 polyfill 构建，见 使用文档 的 Custom build 一节。

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