Reemplazar RequireJS por Vite/Rollup/Webpack

[ominousg]

AOWeb usa RequireJS, un cargador de módulos/package manager que usa el patrón de importación AMD, y no es compatible con las versiones nuevas (+v6) de Pixi JS. Todo lo que se mostró en el video -deferred shading, partículas, shaders, texturas comprimidas con KTX, animación esquelética, etc- necesita pasar de la versión 4.0.3 de Pixi a +v6 para funcionar correctamente, por lo tanto este issue (migrar de RequireJS) tiene la prioridad más alta.

Dejo un poco de información por si alguien quiere intentar la migración a Vite/Rollup o Webpack - también me va a servir para refrescar la memoria en un futuro, si es que todavía no se migró.

Ejemplos/boilerplates usando Pixi JS: Vite + Pixi v6 - Rollup + Pixi v6 - Webpack + Pixi v5 - Otro Webpack + Pixi v5

RequireJS se encuentra en js > lib > require.js - El AOWeb carga los modulos en js > home.js y está declarado en el index.html de la siguiente manera:

<script data-main="js/home" src="js/lib/require.js"></script>

Otra parte es actualizar todas las importaciones en todos los archivos que usan define estilo AMD - esto ya lo tengo hecho, si alguien va a intentar la migración me lo puede pedir por acá. Por ejemplo en el caso de js > model > acciones.js pasar de:

define(["enums", "font", "model/macros"], function (Enums, Font, Macros) {

a:

import * as Enums from "../enums";
import * as Font from "../font";
import * as Macros from "./macros";

[ominousg]

🥳 Terminado: 158eedf. Migración de RequireJS a Webpack. Ahora se pueden usar e instalar dependencias con npm. Se cambió el estilo de importación AMD (define) por ESM (import). Trasladando HTML de los popups a sus archivos .js

Probablemente haga una migración a Vite en el futuro.