When I output my code as es the following works perfectly.
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,
}),
],
};
However, when I change format to umd, which I kind of need for backwards compatibility on the browser. and change index.html to:
<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>
It displays a blank page, when I check the console it gives an ReferenceError
Uncaught ReferenceError: Engine is not defined
I have a hypothesis that it might be because of @babel/plugin-transform-runtime, however, I am not too sure that's what's actually happening here.
Full Code can be found here: https://github.com/IamRifki/earthbound-battle-backgrounds-rollup
The Solution is to call it with the prefix EBB, like the output.name value suggests.
<body>
<canvas></canvas>
<script type="module">
const engine = new EBB.Engine([new EBB.BackgroundLayer(153), new EBB.BackgroundLayer(298)]);
engine.animate();
</script>
</body>