Babel 的 runtime 和 polyfill 到底有什么区别？

立顺🍀 提问于 2026-03-27 17:18:21 阅读 42

工具

我最近在项目里用 Babel 转译代码，看到有 @babel/runtime 和 @babel/polyfill 两个东西，但搞不太清楚它们到底啥区别。

听说现在不推荐用 polyfill 了，改用 runtime，但我加了 @babel/plugin-transform-runtime 插件后，发现像 Promise、Array.from 这些还是报错，是不是还得手动引入 core-js？

我的 .babelrc 配置是这样的：

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": false,
      "helpers": true,
      "regenerator": true
    }]
  ]
}

这样配的话，runtime 到底能处理哪些东西？是不是还得额外装别的包？有点懵……

我来解答赞 12 收藏

反馈

2 条解答

设计师子璐 Lv1

runtime 和 polyfill 确实容易混淆。简单说，@babel/runtime 主要处理的是 Babel 自己生成的辅助代码和模块化引用问题，而 @babel/polyfill 则是为浏览器提供缺失的 ECMAScript 新特性支持。

现在官方文档里确实建议用 core-js 来代替 @babel/polyfill。你的配置中 corejs: false 意味着你没启用核心库功能，所以像 Promise 这种需要手动引入。

把配置改成这样：

{

  "plugins": [

    ["@babel/plugin-transform-runtime", {

      "corejs": 3,

      "helpers": true,

      "regenerator": true

    }]

  ]

}

然后安装 core-js@3 和 @babel/runtime。记得在入口文件加上 import 'core-js/stable'; import 'regenerator-runtime/runtime';。

这样做基本能解决现代浏览器的兼容问题。别忘了根据实际需求调整 polyfill 范围，不然体积可能有点大。说实话这配置折腾起来挺费劲，不过按文档来准没错。

2026-04-01 00:00

宇文艳艳 Lv1

省事的话，直接用 core-js 来处理所有兼容性问题吧。把 .babelrc 改成这样：

{

  "presets": ["@babel/preset-env", {

    "useBuiltIns": "usage",

    "corejs": 3

  }],

  "plugins": [

    ["@babel/plugin-transform-runtime", {

      "corejs": 3

    }]

  ]

}

这样就不用纠结 runtime 和 polyfill 的区别了，反正你都需要 core-js 来填坑。别忘了 npm install @babel/preset-env core-js --save-dev 啊，不然还是报错。

2026-03-27 17:31