核心不是“强行转译”，而是“按需补丁 + 精准降级 + 运行时兜底”：需区分语法问题与api缺失，通过运行时检测识别真实依赖，用usebuiltins: 'usage'按需引入polyfill，分层配置babel（语法降级）与webpack（运行时注入），并隔离冷门旧代码避免冲突。
直接说结论：对含显式绑定（如 Function.prototype.bind、Object.assign、Promise 等在旧环境缺失或行为不一致的API）的冷门旧代码做安全兼容降级，核心不是“强行转译”，而是“按需补丁 + 精准降级 + 运行时兜底”。盲目启用全量 polyfill 或粗暴设 targets 会导致体积膨胀、行为偏差甚至运行时冲突。
识别真实绑定依赖，而非语法表面
显式绑定问题常被误判为“ES6语法问题”，实则多属运行时 API 缺失。例如：
-
Array.from(document.querySelectorAll('div'))在 IE11 中失败，不是因为箭头函数，而是Array.from未定义； -
fetch().then(...)在 Android 4.4 WebView 中报错，因原生fetch未实现，Babel 不会自动处理； -
Object.assign({}, a, b)在 IE9 中抛异常，属于标准 API 缺失，非语法问题。
建议用 runtime detection + usage mapping 替代静态扫描：在开发环境注入轻量检测脚本，记录实际执行中触发的 undefined 方法名，再映射到对应 polyfill。
Webpack + Babel 分层配置策略
不要把所有事情交给 Babel。应分层协作：
-
Babel 负责语法降级：仅处理 ES2015+ 语法（如 class、async/await），用
@babel/preset-env配置{ targets: { ie: '11' }, useBuiltIns: 'usage', corejs: 3 }—— 关键是useBuiltIns: 'usage'，它只引入代码中真正调用的 polyfill； -
Webpack 负责运行时注入：在入口文件顶部显式导入最小化 polyfill，例如：
import 'core-js/stable/array/from'; import 'core-js/stable/promise';，避免全局污染； -
排除危险自动补丁：禁用
core-js/stable全量导入，禁用regenerator-runtime/runtime的全局注入，改用按需import 'regenerator-runtime/runtime'并确保只在使用async的模块中导入。
针对冷门旧代码的定制化处理
老旧项目常含非标准写法（如手动模拟 bind、自定义 extend 工具函数），这些可能与现代 polyfill 冲突。处理方式包括：
- 在 Webpack
module.rules中为特定 legacy 目录添加独立 loader 链，例如：{ test: /\/legacy\//, use: ['babel-loader', 'imports-loader?this=>window'] }； - 用
babel-plugin-transform-function-bind替换原生bind调用，避免与core-js的Function.prototype.bind补丁竞争； - 对已知有副作用的旧工具库（如早期版本 underscore、zepto），在
externals或resolve.alias中隔离，防止被 Babel 重复处理。
验证与锁定行为一致性
降级后必须验证“功能等价性”，而非仅“不报错”：
- 在目标最低浏览器中跑真实用例（如 IE11 的
Array.from(NodeList)返回是否为真数组）； - 用
webpack-bundle-analyzer检查 polyfill 是否被重复引入（常见于多个node_modules子依赖各自引入不同版本core-js）； - 设置 CI 检查：打包产物中禁止出现
require('core-js/modules/es.全量路径，只允许core-js/stable/xxx或明确子模块路径。
