元素
元素
工具
博客
问答

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

倩云 阅读 53
工具

我在 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’，但还是不行，是不是配置哪里漏了？

我来解答 赞 9 收藏
二维码
手机扫码查看
反馈
2 条解答
迷人的奕瑞
迷人的奕瑞 Lv1
问题应该出在 Babel 配置上。虽然你已经引入了 core-js/stable 和 regenerator-runtime/runtime，但还需要确保 Babel 能够正确地转译这些特性。

首先，确认你已经安装了必要的依赖：

npm install --save core-js@3 regenerator-runtime


然后，在你的 Babel 配置文件（通常是 .babelrc 或 babel.config.js）中，确保添加了 useBuiltIns: 'usage' 选项，并指定了 corejs 的版本为 3。这样 Babel 才会根据你的代码实际使用到的特性来引入相应的 polyfill。

以下是 babel.config.js 的一个示例配置：

module.exports = {

  presets: [

    ['@babel/preset-env', {

      useBuiltIns: 'usage',

      corejs: 3,

    }],

    '@babel/preset-react',

  ],

};


同时，确保在项目的入口文件（比如 index.js 或 main.js）中引入 regenerator-runtime/runtime：

import 'regenerator-runtime/runtime';


这样配置之后，Babel 应该能够正确处理 async/await 和 Promise，避免在低版本浏览器中出现未定义的情况。记得重新打包项目，然后测试一下效果。
点赞
2026-03-22 13:11
ლ斐然
ლ斐然 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
相关推荐
元素
元素
工具
博客
问答
登录/注册