Babel Polyfill 到底该怎么用才不会报错？

倩云提问于 2026-03-20 15:22:20 阅读 14

工具

我在 React 项目里用了 async/await，但打包后在低版本浏览器里直接白屏，控制台报 Promise 未定义。我查了说是需要加 Polyfill，但按文档引入 @babel/polyfill 后又提示这个包已经废弃了，现在到底该咋整？

我现在的代码是这样的：

const fetchData = async () => {
  const res = await fetch('/api/data');
  const data = await res.json();
  return data;
};

function App() {
  useEffect(() => {
    fetchData().then(console.log);
  }, []);

  return <div>hello</div>;
}

试过在入口文件 import ‘core-js/stable’ 和 ‘regenerator-runtime/runtime’，但还是不行，是不是配置哪里漏了？

我来解答赞 2 收藏

反馈

1 条解答

ლ斐然 Lv1

好的，我们一步一步来解决这个问题。首先，你需要知道为什么会出现这个问题。在低版本浏览器中，Promise 和 async/await 并不被支持，所以你需要添加一些 polyfill 来补全这些功能。

你说你试过了 core-js/stable 和 regenerator-runtime/runtime，但还是有问题。这可能是配置或者引入顺序的问题。让我们重新来一次。

第一步，确保你已经安装了必要的包。你需要 @babel/preset-env 和 core-js。regenerator-runtime 是 core-js 的一部分，所以不需要单独安装。

你可以运行以下命令来安装它们：

npm install --save @babel/preset-env core-js

第二步，配置 Babel。你需要在 .babelrc 文件中进行如下配置：



{

  "presets": [

    ["@babel/preset-env", {

      "useBuiltIns": "usage", // 这会根据你的代码自动引入需要的 polyfill

      "corejs": 3 // 使用 core-js 的版本

    }]

  ]

}

第三步，在你的入口文件（通常是 index.js 或者 app.js）的最顶部引入 core-js 和 regenerator-runtime/runtime。确保这两行代码出现在任何其他 import 语句之前。



import 'core-js/stable';

import 'regenerator-runtime/runtime';



// 你的其他代码...

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';



ReactDOM.render(, document.getElementById('root'));

这样做之后，Babel 会自动检测你的代码并引入必要的 polyfill 来支持 async/await 和 Promise 在低版本浏览器上运行。useBuiltIns: "usage" 这个配置项会根据你的实际代码来决定引入哪些 polyfill，这样可以减少打包后的文件大小。

最后，别忘了检查你的 package.json 中的 browserslist 配置，确保它包含了你需要支持的所有浏览器版本。如果你没有这个配置，可以在 package.json 中添加如下内容：



"browserslist": [

  "> 0.25%",

  "not dead"

]

这样配置会确保你的代码在大多数现代浏览器上都能正常工作。

希望这些步骤能帮到你。如果还有问题，可能需要检查一下其他地方的配置，比如 Webpack 配置或者 Babel 插件。有时候一个不起眼的小问题就能导致大麻烦。加油！

2026-03-20 15:27