如何配置TypeScript React应用以兼容IE 11？

核心错误分析 #

• "Identifier, number or key is expected"：通常是ES6+语法未转译（如对象短属性、尾逗号）或代码语法错误导致IE11无法解析。
• 图示错误（推测为语法/API兼容问题）：大概率是未转译箭头函数、let/const，或缺少必要Polyfill。

逐个配置文件修正 #

tsconfig.json #

必须确保TypeScript输出ES5兼容代码：

{
  "compilerOptions": {
    "target": "ES5", // 强制输出ES5代码
    "module": "ESNext",
    "lib": ["ES2015", "DOM", "DOM.Iterable"], // 提供转译所需的类型定义
    "downlevelIteration": true, // 修复for...of等迭代器在IE11的兼容问题
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

babel.config.js #

配置Babel全面转译ES6+语法并自动注入Polyfill：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: { ie: "11" }, // 指定兼容IE11
        useBuiltIns: "usage", // 按需注入Polyfill
        corejs: 3 // 依赖core-js@3版本
      }
    ],
    "@babel/preset-typescript", // 处理TypeScript语法
    "@babel/preset-react" // 若使用React，需添加此预设
  ],
  plugins: [
    "@babel/plugin-transform-runtime", // 减少重复Polyfill代码
    "@babel/plugin-proposal-class-properties" // 转译类属性语法
  ]
};

webpack.config.js #

确保Babel加载器处理所有TS/TSX文件，同时兼容IE11的压缩配置：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/, // 注意：若部分第三方依赖未转译，需移除对应包的排除规则
        use: "babel-loader"
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            ie8: true
          },
          output: {
            ie8: true
          },
          ecma: 5
        }
      })
    ]
  }
};

package.json #

确认已安装必要依赖：

{
  "dependencies": {
    "core-js": "^3.30.0",
    "react": "^17.0.2", // 若使用React，建议用17.x版本（18.x不兼容IE11）
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.21.0",
    "@babel/preset-typescript": "^7.21.0",
    "@babel/preset-react": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.21.0",
    "babel-loader": "^9.1.2",
    "terser-webpack-plugin": "^5.3.7",
    "typescript": "^4.9.5",
    "webpack": "^5.76.0"
  }
}

index.tsx #

无需手动引入Polyfill（useBuiltIns: "usage"会自动处理），但需避免直接使用IE11不支持的原生API（如fetch，需额外添加whatwg-fetch Polyfill）。

额外检查项 #

1. 排查第三方依赖：若部分库未转译ES6+代码，需在webpack的exclude中移除该包，让Babel处理。
2. 移除代码中的尾逗号：IE11不支持对象/数组末尾的逗号。
3. 清空构建缓存：执行rm -rf node_modules/.cache或手动删除dist目录后重新构建。

内容的提问来源于stack exchange，提问作者Ihor Stoner