如何给react加上polyfill

为React项目添加Polyfill的方法

在React项目中添加Polyfill可以确保代码在旧版浏览器中正常运行。以下是几种常见的方法：

使用core-js和regenerator-runtime

安装core-js和regenerator-runtime作为项目依赖：

npm install core-js regenerator-runtime

在项目的入口文件（通常是index.js或main.js）顶部引入：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

使用@babel/preset-env配置

在babel.config.js或.babelrc文件中配置@babel/preset-env：

{
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: 3,
      }
    ]
  ]
}

确保已安装相关依赖：

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

针对特定功能的Polyfill

如果只需要为某些特定功能添加Polyfill，可以单独引入：

import 'core-js/features/promise';
import 'core-js/features/array/find';

使用react-app-polyfill（适用于Create React App项目）

对于Create React App创建的项目，可以使用react-app-polyfill：

npm install react-app-polyfill

在src/index.js文件中引入：

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

通过webpack配置Polyfill

在webpack.config.js中添加entry时包含Polyfill：

module.exports = {
  entry: ['core-js/stable', 'regenerator-runtime/runtime', './src/index.js']
}

检查浏览器支持情况

使用browserslist配置指定需要支持的浏览器版本，在package.json中添加：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

动态加载Polyfill

可以使用polyfill.io服务动态加载所需的Polyfill，在index.html中添加：

<script src="https://polyfill.io/v3/polyfill.min.js?features=default,es6,es7,es2015,es2016,es2017,es2018,es2019"></script>