En el artículo anterior ofrecimos diversos mecanismos para la incorporación de código JavaScript en los sitios web estáticos que creamos mediante el SSG Eleventy. Si tienes un javascript medianamente sencillo probablemente serán suficientes para ti, pero sí quieres incorporar frameworks o bibliotecas de código modernas desde npm probablemente necesites algo más.

Así pues, en este artículo vamos a ver una alternativa extra y mucho más versátil para incorporar nuestro código JS que aporta diversas ventajas, entre ellas el compilado del código JavaScript o el uso de packages npm importados por el nombre. Estas son tareas muy habituales en el desarrollo frontend moderlo pero para poder llevarlas a cabo necesitamos alguna herramienta frontend. Una de las alternativas más populares actualmente es Vite, que nos permitirá realizar tareas habituales en las aplicaciones frontend y conseguirá optimizar el sitio web resultante.

Si no conoces Vite, cabe decir que es una herramienta que permite el procesamiento del código frontal, como el CSS o el JavaScript. Hemos abordado esta utilidad en otros artículos por lo que te recomendamos consultar la página de Vite.

Plugin de Eleventy para Vite

Para facilitar la integración entre Eleventy y Vite existe un plugin que podemos usar y que permite efectuar tanto las tareas de desarrollo como las de llevar el código a producción.

El plugin que veremos se llama eleventy-plugin-vite. Nos ahorrará mucho trabajo de integración de esta herramienta en los procesos de trabajo con el generador de sitios estáticos.

En realidad existen algunas aproximaciones para el uso de Vite en Eleventy. La que vamos a ver es la integración oficial de Vite realizada por el equipo de 11ty.

Pasos para integrar eleventy-plugin-vite en nuestro proyecto

Ahora vamos a describir con detalle todos los pasos que necesitas realizar para integrar Vite en un proyecto de sitio estático generado con Eleventy.

Paso 1: Instalación del plugin Eleventy-Vite

Esto lo consigues con el siguiente comando de npm.

npm install @11ty/eleventy-plugin-vite

Paso 2: declaración del plugin en la configuración de Eleventy

A continuación necesitamos añadir el plugin en la configuración de Eleventy. Esto lo tenemos que hacer mediante el siguiente código en el archivo eleventy.config.js.

const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyVitePlugin);
  // otras configuraciones
};

Paso 3: Donde colocar los archivos CSS y JavaScript

Para usar Vite en Eleventy, los archivos estáticos como CSS y JavaScript generalmente se colocan en el directorio "public", que cuelga desde la raíz de tu proyecto.

Así pues, ahora en nuestro proyecto vamos a tener una carpeta "public" en la que colocaremos todos los archivos que Vite debe procesar. Por mantener un poco de orden, y proyectos tienden a tener múltiples archivos JavaScript y CSS, vamos a crear dos carpetas dentro de public:

• public/css: Donde colocaremos las hojas de estilo que queremos que Vite procese.
• public/js: Donde colocaremos todos los archivos de javascript del proyecto.

Los archivos que coloquemos en este directorio se sirven como si estuviesen directamente publicados en la ruta raíz "/".

Aquí podemos hacer unas aclaraciones para aplicar algunos detalles sobre cómo funciona Vite. Durante la etapa de desarrollo se copian tal cual los archivos que están en "public" al directorio de distribución, sin cambios. Vite se encarga de procesarlos internamente cuando se ejecutan en el navegador. Durante la construcción de los archivos para llevar a producción (el build) Vite se encarga de procesarlos y dejar as copias compiladas en la carpeta de distribución.

Es importante referenciar estos activos usando rutas absolutas en el código del template, como veremos en el siguiente paso.

Paso 4: Enlazar el script JavaScript raíz en el layout

Ahora, para que Vite pueda hacer su trabajo debemos de incluir el script JavaScript o CSS en el layout. Con eso estaremos informando a Vite cuáles son los archivos raíz desde donde tiene que empezar a realizar la compilación de los assets.

Generalmente tendremos un archivo JavaScript de inicio que contendrá los imports a todos los módulos javascript que necesitamos en nuestro sitio web. Con enlazar este archivo raíz será suficiente para que Vite se encargue de realizar toda la concatenación de los archivos de código JS y su correspondiente compilado.

Solo hay un detalle y es que para poder realizar imports dentro del código JavaScript la etiqueta <script> necesita tener el atributo type="module", ya que si no obtendremos un error al ejecutar la página.

<script src="/js/index.js" type="module"></script>

Como has podido comprobar las rutas de los archivos las hemos colocado absolutas desde la raíz, asumiendo que están en una carpeta "js". A pesar que nosotros hemos colocado la carpeta "js" dentro del directorio "public", la ruta no debe mencionar a "public".

Compilación del CSS con Vite en Eleventy

Lo más normal es que quieras procesar también el código CSS, permitiendo que se compacten todos los archivos de CSS en un único fichero, optimizando el rendimiento de tu proyecto. Pues bien, el mismo proceso que hemos explicado para Javascript también te sirve para poder compilar el CSS.

Aunque creo que no hace falta mucha explicación adicional, simplemente tendrás que:

• Alojar los arhivos CSS en la carpeta public (generalmente usarás una carpeta public/css donde colocarás un archivo principal y todos los parciales de CSS)
• Enlazar la hoja de estilos en el layout con la correspondiente etiqueta <link>

Mediante el proceso de compiado de Vite se encargará de unir todos los CSS importados desde el archivo CSS principal. Gracias al plugin de Vite para Eleventy no necesitas hacer nada adicioal para que se realice el correspondiente compilado del CSS.