Por lo tanto, estoy transfiriendo una base de código antigua de 2017 de Webpack a Rollup por motivos de rendimiento y tamaño del código, también debido a las antiguas dependencias que usaba la base de código.
Desafortunadamente, la nueva versión de Rollup tiene un problema para el que no pude encontrar una solución. No parece exportar algunas clases (en este caso, Engine y BackgroundLayer ), pero la versión inalterada de Webpack sí lo hace. ¿Hay alguna razón para esto?
El Error en cuestión:
Uncaught ReferenceError: Engine is not defined Aquí está mi rollup.config.js
import arraybuffer from '@wemap/rollup-plugin-arraybuffer'; import { babel } from "@rollup/plugin-babel"; import commonjs from "@rollup/plugin-commonjs"; import pkg from './package.json'; import resolve from "@rollup/plugin-node-resolve"; // import { terser } from "rollup-plugin-terser"; export default { input: "src/index.js", output: { name: "index", file: `dist/${pkg.name}.js`, format: "umd", }, external: ['ms'], 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({ exclude: 'node_modules/**', babelHelpers: "runtime", skipPreflightCheck: true }), ] }Si alguien requiere el código base completo, aquí están las dos versiones:
Lo descubrí, tuve que llamar a mi bundle.js dentro de un module :
index.html
<script type="module"> import { BackgroundLayer, Engine } from "./bundle.js"; const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)]); engine.animate(); </script>