Módulos JavaScript

Los programas JavaScript comenzaron siendo bastante pequeños — la mayor parte de su uso en los primeros días era para realizar tareas de scripting aisladas, proporcionando un poco de interactividad a tus páginas web donde fuera necesario, por lo que generalmente no se necesitaban grandes scripts. Avancemos unos años y ahora tenemos aplicaciones completas que se ejecutan en navegadores con mucho JavaScript, JavaScript ahora se usa en otros contextos (Node.js, por ejemplo).

Por lo tanto, en los últimos años se ha comenzado a pensar en proporcionar mecanismos para dividir programas JavaScript en módulos separados que se puedan importar cuando sea necesario. Node.js ha tenido esta capacidad durante mucho tiempo, y hay una serie de bibliotecas y marcos de JavaScript que permiten el uso de módulos (por ejemplo, CommonJS y AMD otros basados en sistemas de módulos como RequireJS, y recientemente Webpack y Babel).

La buena noticia es que los navegadores modernos han comenzado a admitir la funcionalidad de los módulos de forma nativa, y de esto se trata este artículo. Esto solo puede ser algo bueno — los navegadores pueden optimizar la carga de módulos, haciéndolo más eficiente que tener que usar una biblioteca y hacer todo ese procesamiento adicional de lado del cliente, ahorrando viajes de ida y vuelta adicionales.

Para demostrar el uso de módulos, hemos creado un sencillo conjunto de ejemplos que puedes encontrar en GitHub. Estos ejemplos demuestran un sencillo conjunto de módulos que crean un elemento <canvas> en una página web, y luego dibujan (y reportan información sobre) diferentes formas en el lienzo.

Estos son bastante triviales, pero se han mantenido deliberadamente simples para demostrar los módulos con claridad.

En nuestro primer ejemplo (ve basic-modules) tenemos la siguiente estructura de archivos:

index.html
main.js
modules/
    canvas.js
    square.js

Los dos módulos del directorio modules se describen a continuación:

• canvas.js — contiene funciones relacionadas con la configuración del lienzo (canvas):

  • create() — crea un lienzo (canvas) con un width y height especificados dentro de un contenedor <div> con un ID especificado, que a su vez se añade dentro de un elemento padre especificado. Devuelve un objeto que contiene el contexto 2D del lienzo y el ID del contenedor.
  • createReportList() — crea una lista desordenada adjunta dentro de un elemento contenedor específico, que se puede usar para generar datos de informes. Devuelve el ID de la lista.

• square.js — contiene:

  • name — una constante que contiene la cadena 'square'.
  • draw() — dibuja una figura cuadrada en un lienzo específico, con un tamaño, posición y color específicos. Devuelve un objeto que contiene el tamaño, la posición y el color del cuadrado.
  • reportArea() — escribe el área de un cuadrado en una lista de informes específica, dada su longitud.
  • reportPerimeter() — escribe el perímetro de un cuadrado en una lista de informes específica, dada su longitud.

A través de este artículo, usaremos extensiones .js para nuestros archivos de módulo, pero en otros recursos, puedes ver que en su lugar se usa la extensión .mjs. La documentación de V8 recomienda esto, por ejemplo. Las razones dadas son:

• Es bueno por claridad, es decir, deja claro qué archivos son módulos y cuáles JavaScript.
• Asegura que tus archivos de módulo sean analizados como un módulo por los entornos de ejecución como Node.js y herramientas de compilación como Babel.

Sin embargo, decidimos seguir usando .js, al menos por el momento. Para que los módulos funcionen correctamente en un navegador, debes asegurarte de que tu servidor los esté sirviendo con un encabezado Content-Type que contenga un tipo MIME de JavaScript como text/javascript. Si no lo haces, obtendrás un estricto error de verificación de tipo MIME como "El servidor respondió con un tipo MIME que no es JavaScript" y el navegador no ejecutará tu JavaScript. La mayoría de los servidores ya configuran el tipo correcto para archivos .js, pero todavía no para archivos .mjs. Los servidores que ya sirven archivos .mjs incluyen GitHub Pages y http-server para Node.js.

Esto está bien si ya estás utilizando un entorno de este tipo, o si no, pero sabes lo que estás haciendo y tiene acceso (es decir, puedes configurar tu servidor para establecer el Content-Type para archivos .mjs). Sin embargo, podría causar confusión si no controlas el servidor desde el que estás sirviendo archivos, o si estás publicando archivos para uso público, como lo hacemos aquí.

Por motivos de aprendizaje y portabilidad, decidimos mantenernos en .js.

Si realmente valoras la claridad de usar .mjs para módulos en lugar de usar .js para archivos JavaScript "normales", pero no quieres encontrarte con el problema descrito anteriormente, siempre puedes usar .mjs durante el desarrollo y convertirlos a .js durante tu paso de compilación.

También vale la pena señalar que:

• Es posible que algunas herramientas nunca admitan .mjs, tal como TypeScript.
• El atributo <script type="module"> se usa para indicar cuándo se está apuntando a un módulo, como verás a continuación.

Lo primero que debes hacer para acceder a las funciones del módulo es exportarlas. Esto se hace usando la declaración export.

La forma más sencilla de utilizarla es colocarla delante de cualquier elemento que desees exportar fuera del módulo, por ejemplo:

export const name = "square";

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return {
    length: length,
    x: x,
    y: y,
    color: color,
  };
}

Puedes exportar funciones, var, let, const y, como veremos más adelante — clases. Deben ser elementos de nivel superior; no puedes usar export dentro de una función, por ejemplo.

Una forma más conveniente de exportar todos los elementos que deseas exportar es usar una sola declaración de exportación al final de tu archivo de módulo, seguida de una lista separada por comas de las características que deseas exportar entre llaves. Por ejemplo:

export { name, draw, reportArea, reportPerimeter };

Una vez que hayas declarado las funciones y características que deseas exportar de tu módulo, debes importarlas en tu script para poder usarlas. La forma más sencilla de hacerlo es la siguiente:

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";

Utiliza la declaración import, seguida de una lista separada por comas de las características que deseas importar entre llaves, seguida de la palabra clave from, seguida de la ruta al archivo del módulo — una ruta relativa a la raíz del sitio, que para nuestro ejemplo de basic-modules sería /js-examples/modules/basic-modules.

Sin embargo, hemos escrito la ruta de manera un poco diferente — estamos usando la sintaxis de punto (.) para significar "la ubicación actual", seguida de la ruta más allá del archivo que estamos tratando de encontrar. Esto es mucho mejor que escribir la ruta relativa completa cada vez, ya que es más corta y hace que la URL sea portátil — el ejemplo seguirá funcionando si lo mueve a una ubicación diferente en la jerarquía del sitio.

Así por ejemplo:

/js-examples/modules/basic-modules/modules/square.js

se convierte en

./modules/square.js

Puedes ver estas líneas en acción en main.js.

Una vez que hayas importado las funciones a tu script, las puedes usar tal como se definieron dentro del mismo archivo. Lo siguiente se encuentra en main.js, debajo de las líneas import:

let myCanvas = create("myCanvas", document.body, 480, 320);
let reportList = createReportList(myCanvas.id);

let square1 = draw(myCanvas.ctx, 50, 50, 100, "blue");
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

Ahora solo necesitamos aplicar el módulo main.js a nuestra página HTML. Esto es muy similar a cómo aplicamos un script normal a una página, con algunas diferencias notables.

En primer lugar, debes incluir type="module" en el elemento <script>, para declarar este script como un módulo. Para importar el script main.js, usamos esto:

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

También puedes incrustar el script del módulo directamente en el archivo HTML colocando el código JavaScript dentro del cuerpo del elemento <script>:

<script type="module">/* El código del módulo JavaScript va aquí */</script>

El script en el que importas las características del módulo básicamente actúa como el módulo de nivel superior. Si lo omite, Firefox, por ejemplo, te da un error de "SyntaxError: Las declaraciones import solo pueden aparecer en el nivel superior de un módulo".

Solo puede usar instrucciones import y export dentro de los módulos, no en scripts normales.

• Debes prestar atención a las pruebas locales — si intentas cargar el archivo HTML localmente (es decir, con una URL file:///), te encontrarás con errores de CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor.
• Además, ten en cuenta que puedes obtener un comportamiento diferente de las secciones del script definidas dentro de los módulos en comparación con los scripts estándar. Esto se debe a que los módulos automáticamente usan strict mode.
• No es necesario utilizar el atributo defer (ve atributos de <script>) al cargar un script de módulo; los módulos se difieren automáticamente.
• Los módulos solo se ejecutan una vez, incluso si se les ha hecho referencia en varias etiquetas <script>.
• Por último, pero no menos importante, dejemos esto en claro — las características del módulo se importan al alcance de un solo script — no están disponibles en el alcance global. Por lo tanto, solo podrás acceder a las funciones importadas en el script en el que se importan y no podrás acceder a ellas desde la consola de JavaScript, por ejemplo. Seguirás recibiendo errores de sintaxis en DevTools, pero no podrás utilizar algunas de las técnicas de depuración que esperabas utilizar.

La funcionalidad que hemos exportado hasta ahora se compone de exportaciones con nombre — cada elemento (ya sea una función, const, etc.) se ha denominado por su nombre en export, y ese nombre también se ha utilizado para referirse a él en import.

También hay un tipo de exportación llamado exportación predeterminada — está diseñado para facilitar que un módulo proporcione una función predeterminada, y también ayuda a los módulos JavaScript a interoperar con los sistemas de módulos CommonJS y AMD existentes (como se explica muy bien en ES6 en profundidad: módulos de Jason Orendorff; busca "Exportaciones predeterminadas").

Veamos un ejemplo mientras explicamos cómo funciona. En nuestros ↑basic-modules↓ square.js puedes encontrar una función llamada randomSquare() que crea un cuadrado con un color, tamaño y posición aleatorios. Lo queremos exportar como nuestro predeterminado, por lo que en la parte inferior del archivo escribimos esto:

export default randomSquare;

Ten en cuenta la falta de llaves.

En su lugar, podríamos anteponer export default a la función y definirla como una función anónima, así:

export default function(ctx) {
  ...
}

En nuestro archivo main.js, importamos la función predeterminada usando esta línea:

import randomSquare from "./modules/square.js";

Una vez más, ten en cuenta la falta de llaves. Esto se debe a que solo se permite una exportación predeterminada por módulo, y sabemos que randomSquare lo es. La línea anterior es básicamente una abreviatura de:

import { default as randomSquare } from "./modules/square.js";

Hasta ahora, nuestros módulos de dibujo de formas en el lienzo parecen estar funcionando bien. Pero, ¿qué pasa si intentamos agregar un módulo que se ocupa de dibujar otra forma, como un círculo o un triángulo? Estas formas probablemente también tendrían funciones asociadas como draw(), reportArea(), etc.; si intentáramos importar diferentes funciones del mismo nombre en el mismo archivo de módulo de nivel superior, terminaríamos con conflictos y errores.

Afortunadamente, hay varias formas de evitar esto. Los veremos en las siguientes secciones.

Dentro de las llaves de tu instrucciones import y export, puedes usar la palabra clave as junto con un nuevo nombre de función, para cambiar el nombre de identificación que utilizará una función dentro del módulo de nivel superior.

Entonces, por ejemplo, ambos de los siguientes harían el mismo trabajo, aunque de una manera ligeramente diferente:

// dentro de module.js
export { function1 as newFunctionName, function2 as anotherNewFunctionName };

// dentro de main.js
import { newFunctionName, anotherNewFunctionName } from "./modules/module.js";

// dentro de module.js
export { function1, function2 };

// dentro de main.js
import {
  function1 as newFunctionName,
  function2 as anotherNewFunctionName,
} from "./modules/module.js";

Veamos un ejemplo real. En nuestro directorio renaming, verás el mismo sistema de módulos que en el ejemplo anterior, excepto que hemos agregado los módulos circle.js y triangle.js para dibujar e informar sobre círculos y triángulos.

Dentro de cada uno de estos módulos, tenemos características con los mismos nombres que se exportan y, por lo tanto, cada una tiene la misma instrucción export en la parte inferior:

export { name, draw, reportArea, reportPerimeter };

Al importarlos a main.js, si intentamos usar esto:

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";
import { name, draw, reportArea, reportPerimeter } from "./modules/circle.js";
import { name, draw, reportArea, reportPerimeter } from "./modules/triangle.js";

El navegador arrojará un error como "SyntaxError: redeclaración de nombre import" (Firefox).

En su lugar, necesitamos cambiar el nombre de las importaciones para que sean únicas:

import {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
} from "./modules/square.js";

import {
  name as circleName,
  draw as drawCircle,
  reportArea as reportCircleArea,
  reportPerimeter as reportCirclePerimeter,
} from "./modules/circle.js";

import {
  name as triangleName,
  draw as drawTriangle,
  reportArea as reportTriangleArea,
  reportPerimeter as reportTrianglePerimeter,
} from "./modules/triangle.js";

Ten en cuenta que podrías resolver el problema en los archivos del módulo, p. ej.

// en square.js
export {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
};

// en main.js
import {
  squareName,
  drawSquare,
  reportSquareArea,
  reportSquarePerimeter,
} from "./modules/square.js";

Y funcionaría igual. El estilo que uses depende de ti, sin embargo, podría decirse que tiene más sentido dejar el código de tu módulo tal cual y realizar los cambios en las importaciones. Esto tiene sentido especialmente cuando estás importando desde módulos de terceros sobre los que no tienes ningún control.

El método anterior funciona bien, pero es un poco complicado y largo. Una solución aún mejor es importar las características de cada módulo dentro de un objeto module. La siguiente forma de sintaxis hace eso:

import * as Module from "./modules/module.js";

Esto toma todas las exportaciones disponibles dentro de module.js y las hace disponibles como miembros de un objeto Module, dándole efectivamente su propio espacio de nombres. Así por ejemplo:

Module.function1()
Module.function2()
etc.

De nuevo, veamos un ejemplo real. Si vas a nuestro directorio module-objects, verás el mismo ejemplo nuevamente, pero reescrito para aprovechar esta nueva sintaxis. En los módulos, las exportaciones están todas en la siguiente forma simple:

export { name, draw, reportArea, reportPerimeter };

Las importaciones, por otro lado, se ven así:

import * as Canvas from "./modules/canvas.js";

import * as Square from "./modules/square.js";
import * as Circle from "./modules/circle.js";
import * as Triangle from "./modules/triangle.js";

En cada caso, ahora puedes acceder a las importaciones del módulo debajo del nombre del objeto especificado, por ejemplo:

let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, "blue");
Square.reportArea(square1.length, reportList);
Square.reportPerimeter(square1.length, reportList);

Por lo tanto, ahora puedes escribir el código de la misma manera que antes (siempre que incluyas los nombres de los objetos donde sea necesario), y las importaciones son mucho más ordenadas.

Como dijimos antes, también puedes exportar e importar clases; esta es otra opción para evitar conflictos en tu código, y especialmente es útil si ya tienes el código de tu módulo escrito en un estilo orientado a objetos.

Puedes ver un ejemplo de nuestro módulo de dibujo de formas reescrito con clases ES en nuestro directorio classes. Como ejemplo, el archivo square.js ahora contiene toda su funcionalidad en una sola clase:

class Square {
  constructor(ctx, listId, length, x, y, color) {
    ...
  }

  draw() {
    ...
  }

  ...
}

que luego exportamos:

export { Square };

En main.js, lo importamos así:

import { Square } from "./modules/square.js";

Y luego usas la clase para dibujar nuestro cuadrado:

let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, "blue");
square1.draw();
square1.reportArea();
square1.reportPerimeter();

Habrá ocasiones en las que querrás agregar módulos juntos. Es posible que tengas varios niveles de dependencias, donde desees simplificar las cosas, combinando varios submódulos en un módulo principal. Esto es posible utilizando la sintaxis de exportación de los siguientes formas en el módulo principal:

export * from "x.js";
export { name } from "x.js";

Para ver un ejemplo, ve nuestro directorio module-aggregation. En este ejemplo (basado en nuestro ejemplo de clases anterior) tenemos un módulo adicional llamado shapes.js, que reúne toda la funcionalidad de circle.js, square.js y triangle.js. También hemos movido nuestros submódulos dentro de un subdirectorio dentro del directorio modules llamado shapes. Entonces, la estructura del módulo en este ejemplo es:

modules/
  canvas.js
  shapes.js
  shapes/
    circle.js
    square.js
    triangle.js

En cada uno de los submódulos, la exportación es de la misma forma, p. ej.

export { Square };

Luego viene la parte de agregación. Dentro de shapes.js, incluimos las siguientes líneas:

export { Square } from "./shapes/square.js";
export { Triangle } from "./shapes/triangle.js";
export { Circle } from "./shapes/circle.js";

Estas toman las exportaciones de los submódulos individuales y las ponen a disposición de manera efectiva desde el módulo shapes.js.

Entonces, ahora en el archivo main.js, podemos obtener acceso a las tres clases de módulos reemplazando

import { Square } from "./modules/square.js";
import { Circle } from "./modules/circle.js";
import { Triangle } from "./modules/triangle.js";

con la siguiente única línea:

import { Square, Circle, Triangle } from "./modules/shapes.js";

La parte más nueva de la funcionalidad de los módulos de JavaScript que estará disponible en los navegadores es la carga dinámica de módulos. Esto te permite cargar módulos dinámicamente solo cuando son necesarios, en lugar de tener que cargar todo por adelantado. Esto tiene algunas obvias ventajas de rendimiento; sigue leyendo y veamos cómo funciona.

Esta nueva funcionalidad te permite llamar a import() como una función, pasándole la ruta al módulo como parámetro. Devuelve una Promise, que se cumple con un objeto module (consulta Crear un objeto module) que te da acceso a las exportaciones de ese objeto, p. ej.

import("./modules/myModule.js").then((module) => {
  // Haz algo con el módulo.
});

Veamos un ejemplo. En el directorio dynamic-module-import tenemos otro ejemplo basado en nuestro ejemplo de clases. Esta vez, sin embargo, no dibujamos nada en el lienzo cuando se carga el ejemplo. En su lugar, incluimos tres botones — "Círculo", "Cuadrado" y "Triángulo" — que, cuando se presionan, cargan dinámicamente el módulo requerido y luego lo usan para dibujar la forma asociada.

En este ejemplo, solo hemos realizado cambios en nuestros archivos index.html y main.js — el módulo exports sigue siendo el mismo que antes.

En main.js hemos tomado una referencia a cada botón usando una llamada a Document.querySelector(), por ejemplo:

let squareBtn = document.querySelector(".square");

Luego adjuntamos un escucha de eventos a cada botón para que cuando se presione, el módulo relevante se cargue dinámicamente y se use para dibujar la forma:

squareBtn.addEventListener("click", () => {
  import("./modules/square.js").then((Module) => {
    let square1 = new Module.Square(
      myCanvas.ctx,
      myCanvas.listId,
      50,
      50,
      100,
      "blue",
    );
    square1.draw();
    square1.reportArea();
    square1.reportPerimeter();
  });
});

Ten en cuenta que, debido a que el cumplimiento de la promesa devuelve un objeto module, la clase se convierte en una subfunción del objeto, por lo que ahora necesitamos acceder al constructor prefijado con Module., p. ej. Module.Square(...).

Aquí hay algunos consejos que te pueden ayudar si tienes problemas para hacer que tus módulos funcionen. ¡No dude en agregarlos a la lista si descubres más!

• Mencionamos esto antes, pero para reiterar: los archivos .js se deben cargar con un tipo MIME de text/javascript (u otro tipo MIME compatible con JavaScript, pero se recomienda text/javascript), de lo contrario, obtendrás un error de comprobación de tipo MIME estricto como "El servidor respondió con un tipo MIME no JavaScript".
• Si intentas cargar el archivo HTML localmente (es decir, con una URL file:///), encontrarás errores CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor. Las páginas de GitHub son ideales ya que también sirven archivos .js con el tipo MIME correcto.
• Debido a que .mjs es una extensión de archivo no estándar, es posible que algunos sistemas operativos no la reconozcan o intenten reemplazarla por otra. Por ejemplo, descubrimos que macOS silenciosamente agregaba .js al final de los archivos .mjs y luego, automáticamente ocultaba la extensión del archivo. Entonces, todos nuestros archivos salían realmente como x.mjs.js. Una vez que desactivamos la acción de ocultar automáticamente las extensiones de archivo y lo entrenamos para aceptar .mjs, todo estuvo bien.

• Uso de módulos JavaScript en la web, por Addy Osmani y Mathias Bynens
• Módulos ES: un análisis profundo de dibujos animados, publicación en el blog Hacks de Lin Clark
• ES6 en profundidad: Módulos, publicación en el blog Hacks de Jason Orendorff
• Libro de Axel Rauschmayer Explorando JS: Módulos

• Anterior