使用Rollup打包React项目为单文件在IE11中显示空白页求助

我之前也踩过类似的IE11兼容坑，结合你的配置，给你几个排查和修复的方向：

1. 修复Rollup intro中的语法错误 #

你的intro配置里有个容易忽略的语法问题：

intro: 'var global = typeof self !== undefined ? self : this;'

这里typeof self !== undefined应该改为typeof self !== 'undefined'——少了引号的话，在IE11里会触发静默语法错误，而IE有时不会在控制台抛出这类错误。修改后更稳妥的写法是：

intro: 'var global = typeof self !== \'undefined\' ? self : window;'

或者直接用IE11原生支持的window作为全局对象：

intro: 'var global = window;'

2. 调整core-js的引入逻辑 #

你在index.js手动引入了core-js/stable和regenerator-runtime/runtime，但同时Babel配置里设置了useBuiltIns: "usage"，这两种方式可能会导致polyfill重复注入或顺序混乱。建议去掉手动引入，让Babel自动按需注入polyfill，这样能更精准地覆盖IE11缺失的特性。

另外确认core-js@3已正确安装：

npm install core-js@3 --save

3. 转译node_modules中的ES6+依赖 #

很多第三方依赖可能使用了IE11不支持的ES6+语法，但你的Babel配置排除了node_modules/**，导致这些代码没被转译。可以修改Babel规则，针对特定依赖进行转译，比如：

babel({
  // 只排除不需要转译的ES5依赖，其余node_modules代码都转译
  exclude: /node_modules\/(?!(react-dom|react|your-es6-dependency)\/)/,
  presets: [/* 你的预设配置 */]
})

4. 优化Rollup的output命名空间 #

你的output设置name: 'window'可能会意外覆盖全局window对象，虽然IE11允许这种操作，但建议改成自定义命名空间，避免全局污染：

output: {
  file: '../compiled/index.js',
  format: 'iife',
  strict: false,
  name: 'ReactEmbeddedApp', // 自定义命名空间
  intro: 'var global = window;'
}

之后在JSP中通过ReactEmbeddedApp来挂载你的React应用即可。

5. 强制捕获IE11的错误 #

IE11的控制台有时不会主动显示错误，你可以在打包后的文件开头添加错误捕获代码：

console.log('React app script loaded');
try {
  // 你的打包后代码内容
} catch (e) {
  console.error('App error:', e.message, e.stack);
}

这样就能强制输出错误信息，帮你定位具体问题。

6. 确认React版本兼容性 #

React 18及以上已经放弃了IE11支持，如果你的项目用了React 18，需要降级到React 17才能兼容IE11。

按照这些步骤逐一排查，应该能解决IE11空白的问题。如果还是不行，可以提供打包后的代码片段或捕获到的错误信息，进一步定位问题。

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