代码库从Webpack迁移到Rollup后部分类未正常导出问题咨询

• 原因1：Rollup的UMD导出默认会把所有导出内容挂载到你配置的output.name对应的全局变量下，你当前配置的name是index，所以所有导出的类默认在window.index.Engine下，直接调用Engine自然会报未定义。而原有Webpack配置会直接把导出的类挂载到全局window根下，两者表现不一致。
• 原因2：@rollup/plugin-commonjs 默认对CommonJS的module.exports导出只会识别为default导出，不会自动拆分命名导出，导致你导出的两个类被打包到了default属性里，无法直接从全局获取。
• 原因3：Rollup默认开启Tree Shaking，如果你原代码中有副作用代码（比如直接给window挂载类的逻辑），会被判定为无用途被删除。

1. 调整Rollup的output配置，适配UMD导出规则
   修改rollup.config.js的output字段如下：

output: {
  name: "earthboundBattleBackgrounds", // 可自定义全局变量名，如果需要和旧版本一致直接挂到window根，可加extend: true
  file: `dist/${pkg.name}.js`,
  format: "umd",
  exports: "named", // 强制导出所有命名导出，不会包裹到default属性中
  extend: true // 开启后会把导出的属性直接挂载到window根下，和旧Webpack表现完全一致
}

2. 配置commonjs插件识别命名导出
   如果你的src/index.js用的是CommonJS的module.exports写法，给commonjs插件加导出映射配置：

commonjs({
  exports: (id) => {
    if (id.endsWith('src/index.js')) {
      return ['Engine', 'BackgroundLayer'] // 显式声明index.js的命名导出项
    }
  }
})

建议直接把src/index.js改成ESModule导出写法，适配性更好：

export { default as Engine } from './Engine'
export { default as BackgroundLayer } from './BackgroundLayer'
// 保留原有默认导出的话加这行
export default { Engine, BackgroundLayer }

3. 标记副作用代码避免被Tree Shaking删除
   如果原代码有直接挂载全局的逻辑，在package.json中添加配置标记代码有副作用：

"sideEffects": ["src/**/*.js"]

修改完重新构建即可正常访问Engine和BackgroundLayer类。

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