如何给react加上polyfill
添加 Polyfill 的通用方法
在 React 项目中添加 Polyfill 通常是为了确保应用在旧版浏览器中正常运行。现代 React 项目通常基于 create-react-app 或类似工具构建，以下是几种常见方法：
安装核心 Polyfill 库如 core-js 或 babel-polyfill：
npm install core-js
# 或
npm install babel-polyfill在项目入口文件（如 index.js）顶部引入：
import 'core-js/stable';
import 'regenerator-runtime/runtime';针对特定功能的 Polyfill
根据项目需要选择特定功能的 Polyfill。例如，添加 fetch 和 Promise 的 Polyfill：
npm install whatwg-fetch promise-polyfill在入口文件中引入：
import 'whatwg-fetch';
import 'promise-polyfill/src/polyfill';配置 Babel 自动 Polyfill
在 Babel 配置文件中（如 .babelrc 或 babel.config.js）添加：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}]
]
}这会根据代码中实际使用的 ES 特性自动注入必要的 Polyfill。
Webpack 配置调整
在 Webpack 配置中确保 Polyfill 优先加载：
module.exports = {
entry: ['core-js/stable', './src/index.js']
};动态 Polyfill 加载
使用 CDN 提供的动态 Polyfill 服务（如 Polyfill.io）：
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,es6,es7"></script>这种方式会根据用户浏览器自动返回必要的 Polyfill。
注意事项
- 现代
create-react-app项目默认包含部分 Polyfill，需检查react-scripts版本。 - 过度的 Polyfill 会增加包体积，建议通过
browserslist配置目标浏览器范围。 - 对于 IE 11 支持，通常需要额外添加
Array.prototype.includes等 Polyfill。
