Rollup打包输出UMD格式失效ES格式正常该如何解决？

你遇到的报错和@babel/plugin-transform-runtime无关，是UMD格式的暴露规则导致的：
当Rollup打包格式设置为umd时，所有模块导出的内容会统一挂载到你rollup.config.js中output.name指定的全局变量下，你配置的name为EBB，因此Engine、BackgroundLayer都在window.EBB对象中，不会直接作为全局变量暴露，所以直接调用会报未定义错误。

方案一：调整HTML调用逻辑（推荐，符合UMD规范） #

修改页面中第二个script的代码，从全局的EBB对象中提取导出的类即可：

<script type="module">
  const { Engine, BackgroundLayer } = window.EBB;
  const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)]);
  engine.animate();
</script>

方案二：直接暴露类为全局变量（可选） #

如果不想每次都从EBB对象取，也可以在你的入口文件src/index.js末尾添加挂载逻辑：

// src/index.js 末尾添加
if (typeof window !== 'undefined') {
  window.Engine = Engine;
  window.BackgroundLayer = BackgroundLayer;
}

遇到类似UMD打包后导出内容找不到的问题，可按以下步骤快速定位：

• 打开打包后的dist/bundle.js文件，搜索你导出的类/方法名，确认它被挂载的全局变量路径
• 在浏览器控制台直接打印对应的全局变量（例如本案例中打印window.EBB），查看内部是否包含你需要的导出内容

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