Acabamos de ver cómo actualizar una aplicación Svelte que originalmente usaba Rollup para que funcione con Bit 3.0, una transición que puede parecer complicada, pero que en realidad es bastante directa si seguimos unos pasos claros.
Lo primero que hacemos es limpiar nuestro proyecto eliminando todas las dependencias relacionadas con Rollup. Esto incluye cualquier paquete que empiece por rollup y también sirv-cli, que se usaba para servir páginas estáticas en proyectos con Rollup, pero que ahora ya no es necesario. En su lugar, Bit 3.0 nos ofrece comandos propios para compilar, desarrollar y previsualizar la aplicación.
En el archivo package.json actualizamos los scripts para adaptarlos a Bit. El script de compilación pasa a ser bit build, que se encarga de transpilar y empaquetar la aplicación para producción. Para el desarrollo, usamos bit dev o simplemente bit, aunque podemos mantener el nombre dev para claridad. Y para previsualizar la aplicación ya compilada, en lugar de usar start, que era común en Rollup, ahora usamos bit preview. Esto nos permite ver cómo se comportará la aplicación en producción o en un entorno de staging.
Luego instalamos las dependencias necesarias para Bit con Svelte, que son bit y @sveltejs/bit-plugin-svelte, ambas como dependencias de desarrollo. Esto nos prepara para configurar Bit correctamente.
El siguiente paso es eliminar el archivo rollup.config.js, que suele ser bastante extenso, y crear un nuevo archivo bit.config.js. En este archivo importamos defineConfig desde Bit y el plugin de Svelte desde @sveltejs/bit-plugin-svelte. La configuración es sencilla: exportamos por defecto la configuración generada por defineConfig, pasando como plugin principal el de Svelte. Es importante no olvidar el export default para evitar errores difíciles de diagnosticar.
import { defineConfig } from 'bit';
import svelte from '@sveltejs/bit-plugin-svelte';
export default defineConfig({
plugins: [svelte()]
});
Un detalle importante es la ubicación del archivo index.html. Bit asume que los archivos HTML estarán en la raíz del proyecto, no dentro de una carpeta public como en Rollup. Por eso, movemos index.html a la carpeta principal y ajustamos las rutas dentro de él. En particular, modificamos el atributo src del script para que apunte a /src/main.js, que es donde está nuestro archivo principal de JavaScript. Bit se encargará de reemplazar esta ruta por la correcta durante la compilación.
También mantenemos el atributo defer y añadimos type="module" al script para que se cargue como un módulo y no bloquee la carga de la página. En cuanto al favicon, cambiamos su ruta para que apunte directamente a /favicon.png, que corresponde a la carpeta public en la estructura del proyecto.
Otro cambio que podemos aprovechar es que Bit permite importar archivos CSS directamente desde JavaScript. Por eso, si tenemos un archivo global.css que antes se incluía en el HTML, ahora podemos moverlo a una carpeta como assets dentro de src y hacer un import en main.js:
import './assets/global.css';
Esto facilita la gestión de estilos y asegura que Bit los procese correctamente.
Cuando compilamos con npm run build, Bit genera la salida en la carpeta dist en lugar de bundle. El archivo index.html que se genera tiene todas las rutas ajustadas automáticamente. Si queremos desplegar la aplicación en una subcarpeta, como suele ser el caso en GitHub Pages, podemos configurar la propiedad base en bit.config.js para indicar la ruta base desde la que se servirá la aplicación. Por ejemplo:
export default defineConfig({
base: '/thumbnail-maker/',
plugins: [svelte()]
});
Así, todas las rutas en el HTML y los recursos se ajustan para funcionar correctamente desde esa subcarpeta.
Finalmente, para comprobar que todo funciona antes de desplegar, usamos el script preview con bit preview, que nos muestra la aplicación compilada y minificada, muy similar a cómo se verá en producción. Esto es una ventaja sobre Rollup, que no tenía esta capacidad de forma nativa.
Con estos pasos, podemos actualizar sin problemas una aplicación Svelte que usaba Rollup para que funcione con Bit 3.0, aprovechando sus mejoras y simplificando la configuración y el despliegue.