react项目如何兼容ie11

兼容IE11的React项目配置方法

确保项目依赖中包含react-app-polyfill和core-js，用于提供ES6+特性的向下兼容。在package.json中确认以下依赖版本：

"dependencies": {
  "react-app-polyfill": "^2.0.0",
  "core-js": "^3.6.5"
}

修改入口文件引入Polyfill

在项目入口文件（通常是src/index.js或src/main.jsx）的最顶部添加以下代码：

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';

调整Babel配置

在babel.config.js或.babelrc中明确指定目标浏览器包含IE11：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      },
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}

Webpack配置调整

修改webpack.config.js以支持旧版语法：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: { ie: '11' } }]
            ]
          }
        }
      }
    ]
  }
}

解决常见兼容性问题

添加以下CSS修复代码到全局样式文件中：

/* 解决Flexbox布局问题 */
.ie11-flex-fix {
  -ms-flex: 1 1 auto;
}

/* 解决Grid布局回退方案 */
@supports not (display: grid) {
  .grid-fallback {
    display: block;
  }
}

测试验证方法

在public/index.html中添加条件注释验证IE11环境：

<!--[if IE 11]>
  <script>
    console.log('Running in IE11 mode');
  </script>
<![endif]-->

使用功能检测而非浏览器检测来处理兼容逻辑：

if (typeof window.Promise === 'undefined') {
  require('es6-promise').polyfill();
}