Cuando saco mi código como es , lo siguiente funciona perfectamente.
index.html
<body> <canvas></canvas> <script type="module"> import { BackgroundLayer, Engine } from "./dist/bundle.js"; const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)]); engine.animate(); </script> </body> rollup.config.js
import arraybuffer from "@wemap/rollup-plugin-arraybuffer"; import { babel } from "@rollup/plugin-babel"; import commonjs from "@rollup/plugin-commonjs"; import resolve from "@rollup/plugin-node-resolve"; import { terser } from "rollup-plugin-terser"; export default { input: "src/index.js", output: { name: "EBB", file: "dist/bundle.js", format: "es", }, plugins: [ arraybuffer({ include: "**/*.dat" }), // so Rollup can import .dat files resolve(), // so Rollup can find `ms` commonjs(), // so Rollup can convert `ms` to an ES module terser(), // minifying // babel configuration babel({ babelHelpers: "runtime", exclude: "**/node_modules/**", skipPreflightCheck: true, }), ], }; Sin embargo, cuando cambio el format a umd , necesito compatibilidad con versiones anteriores en el navegador. y cambia index.html a:
<body> <canvas></canvas> <script src="./dist/bundle.js"></script> <script type="module"> const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)]); engine.animate(); </script> Muestra una página en blanco, cuando reviso la consola da un ReferenceError
Uncaught ReferenceError: Engine is not defined Tengo la hipótesis de que podría deberse a @babel/plugin-transform-runtime , sin embargo, no estoy muy seguro de que eso sea lo que realmente está sucediendo aquí.
El código completo se puede encontrar aquí: https://github.com/IamRifki/earthbound-battle-backgrounds-rollup
La solución es llamarlo con el prefijo EBB , como sugiere el valor de output.name .
<body> <canvas></canvas> <script type="module"> const engine = new EBB.Engine([new EBB.BackgroundLayer(153), new EBB.BackgroundLayer(298)]); engine.animate(); </script> </body>