A la hora de desarrollar sitios web en general JavaScript es una de las principales necesidades. Por supuesto Eleventy ofrece soporte para JavaScript con cualquier configuración que necesitemos. Es decir, podemos incorporar Javascript de distintas maneras y con diversas herramientas frontend que nos faciliten el trabajo del día a día.

En este artículo vamos a ver las maneras básicas de introducir Javascript en un proyecto desarrollado con el SSG Eleventy. Vamos a ver distintas formas de incorporar código JavaScript de lo más simple en adelante.

La mayoría de las técnicas que vamos a ver aquí las puedes aplicar también al CSS de igual manera.

A continuación te vamos a mostrar cómo agregar Javascript en un sitio Eleventy abordando estos puntos.

• Copiado directo del código JavaScript en el sitio en producción
• Crear un archivo que agrupe varios parciales de Javascript
• Cómo usar el código js producido por este template

Copiado directo del código JavaScript en el sitio en producción

La técnica más elemental para incorporar algo de JavaScript a tu proyecto consiste en copiar el archivo de JavaScript, tal cual lo has desarrollado, en el sitio en producción.

En el artículo de primeros pasos con Eleventy vimos como hacer esto con CSS. veamos ahora el ejemplo con JavaScript.

Vamos a comenzar creando un archivo que se llama app.js en la raíz del proyecto.De momento vamos a colocar un simple código JavaScript para poder experimentar y ver si se ejecuta en el sitio. El código contendrá simplemente un mensaje enviado a la consola de JavaScript.

console.log('Soy Javascript!!');

Ahora en el archivo de configuración de 11ty, eleventy.config.js, Vamos a especificar que este archivo se debe copiar al llevar a producción.

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("styles.css");
  eleventyConfig.addPassthroughCopy("app.js");
};

Puedes apreciar que en este caso estamos copiando los archivos, ya que estamos haciendo evolucionar el proyecto que vamos realizando a medida que escribimos este Manual de Eleventy. Recuerda que previamente habíamos realizado el copiado de la hoja de estilos. Ahora con un código muy similar estamos realizando el copiado del archivo app.js que hemos dejado en la raíz del proyecto.

Para utilizar el archivo de JavaScript dentro del sitio simplemente lo vamos a enlazar dentro del layout. Para ello colocaremos una etiqueta JavaScript como la siguiente:

<script src="/app.js"></script>

Típicamente esta etiqueta la colocará antes del </body> en el código HTML del archivo de layout.

Crear un archivo que agrupe varios parciales de Javascript

Una segunda técnica que podemos usar consiste en la creación de un archivo en el que podemos agrupar varios parciales de código JavaScript, de modo que el sistema de build de Eleventy se encargue de concatenarlos y dejarlos en un único fichero.

Quizás esta técnica no tenga mucho sentido con JavaScript, porque actualmente es común utilizar módulos de JavaScript que tienen sus propios ámbitos y al concatenarlos de esta manera dentro de un único fichero pueden producirse colisiones al ponerlo todo en un mismo espacio de nombres. Sin embargo para CSS esta técnica sí que tendría mucha validez.

Para mostrar un ejemplo de esta técnica vamos a crear una carpeta que se llama "js". Dentro de ella vamos a crear tres archivos:

Archivo app.njk

Este archivo contendrá un template parcial de código, que luego podremos referenciar en nuestro layout principal.

La extensión .njk se usa con archivos de plantilla de Nunjucks, un motor de plantillas para JavaScript muy usado en Eleventy.

En este archivo simplemente vamos a indicar cuáles son los parciales de código JavaScript (aunque como digo sería más relevante el ejemplo al referirse a código CSS) que queremos que se concatenen.

El código será el siguiente:

---
permalink: app.js
eleventyExcludeFromCollections: true
---
{% include "./declarations.js" %}
{% include "./logs.js" %}

Primero podemos ver cómo se utiliza un pedazo de front matter dentro del parcial Nunjucks. En ese bloque estamos indicando dos cosas:

• Con "permalink" indicamos que cuando se procese este template se cree un archivo llamado app.js en la raíz del proyecto
• Con "eleventyExcludeFromCollections" indicamos que la carpeta donde está este template parcial de Nunjucks no se refleje en el momento de construirse el sitio estático.

Luego encontramos dos includes a dos archivos de JavaScript, cuyas rutas indican que se encontrarán en la misma carpeta que el template Nunjucks.

Archivo declarations.js

Este es un archivo JavaScript normal y corriente, uno de los dos archivos que se concatenarán gracias al template parcial.

El código podría ser algo como lo que sigue:

let x = 1;
let name = "miguel";

Solo estamos colocando unas declaraciones de variables, sin llegar a usarlas para nada en este mismo archivo.

Archivo logs.js

En este segundo archivo de JavaScript vamos a mandar a la consola mensajes para mostrar el contenido de las dos variables anteriores.

console.log(x);
console.log(name);

Cómo usar el código js producido por este template

Al producirse el sitio web se generará el archivo app.js y se colocará en la raíz del proyecto.

Por tanto, para utilizar este JavaScript resultante de la concatenación de ambos archivos simplemente tenemos que enlazarlo en el layout, con una etiqueta script igual que habíamos hecho anteriormente.

<script src="/app.js"></script>

Al ejecutar el proyecto observaremos que los dos mensajes se van a la consola, mostrando el contenido de las variables. Aunque las declaraciones de las variables y su uso estaban en archivos separados el conjunto funciona, lo que nos indica que el código JavaScript se ha conseguido concatenar de manera correcta.

Conclusión

De esta sencilla manera hemos conseguido incorporar archivos de JavaScript que podrán ser ejecutados en el proyecto del sitio estático generado. Este código JavaScript permitirá incluir todo tipo de funcionalidad, tan avanzada como sea necesaria. Sin embargo, a la hora de trabajar con JavaScript es muy habitual realizar ciertas compilaciones y transformaciones en los archivos de código. Para eso nos hará falta una herramienta frontend como la que vamos a explicar en el siguiente artículo, donde se enseñará a integrar Vite para el procesado del JavaScript en un sitio estático con Eleventy.