React应用在Internet Explorer运行问题及browserlist配置解析

问题1：为什么React应用在Internet Explorer中运行会存在特定限制？ #

• React 16及以上版本默认依赖ES6+的语法和API（包括Promise、Map、Set、class语法、箭头函数等），而Internet Explorer（尤其是IE11及以下版本）原生不支持这些新特性，未做兼容处理的代码在IE中运行会直接抛出语法或API未定义错误。
• React 18版本官方已完全终止对IE浏览器的支持，默认打包产物不再适配IE环境。
• 默认的前端工程化配置（包括babel、postcss等）通常不会主动对IE做兼容转译，未调整配置的项目打包产物自然无法在IE中运行。

问题2：如何设置才能让应用支持在任意浏览器中运行？ #

• 第一步：调整browserslist配置，同时修改development和production两个环境的兼容目标，加入需要适配的浏览器版本（比如你手动添加的ie 11）。
• 第二步：引入对应polyfill填补IE缺失的API，如果是使用create-react-app创建的项目，可在入口文件最顶部引入react-app-polyfill/ie11和core-js/stable、regenerator-runtime/runtime这类全量polyfill；如果是自行配置的工程，需要在babel配置中开启core-js的按需注入。
• 第三步：调整转译规则，确保babel会将项目代码及用到的未做ES5兼容的第三方依赖都转译成ES5语法，避免第三方包的高版本语法导致IE报错。
• 额外说明：如果需要兼容IE11，不要使用React 18及以上版本，需降级到React 17或更低版本。

问题3：给出的development配置段的作用是什么？ #

这段配置属于browserslist的开发环境配置项，是工程化工具共用的浏览器兼容目标声明：

"development": [
  "ie 11",
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]

• 它会被项目中的babel、postcss、autoprefixer等工具读取，告知这些工具在开发环境打包时，需要适配列表中的所有浏览器。
• 你手动添加ie 11之后，开发环境的打包过程会额外处理IE11的兼容逻辑：比如将高版本语法转成IE11支持的ES5语法、自动添加CSS前缀适配IE11等，这样你在开发环境下打开IE11访问项目就能避免兼容性报错。
• 注意该配置仅作用于开发环境，生产环境的兼容逻辑需要单独配置browserslist的production字段。

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