¿Para que sirven los módulos en JS?


Quizá alguna ves has visto o escuchado sobre los módulos en JavaScript y no encuentras la utilidad o no los ves muy importantes. En este articulo voy a demostrarte por que son importantes y por que deberías usarlos.

Cada ves JavaScript es más y más importante en el desarrollo web y por eso más código es escrito en JS. Esto hace también que termines con archivos demasiados grandes y que luego necesites partir en archivos más pequeños o que necesites utilizar alguna función definida en otro archivo de JS.

El problema principal de trabajar con varios archivos de JS son las dependencias, imagina que tienes un archivo llamado util.js con este código:

// Archivo: util.js

function msg()
{
   console.log("Mensaje de confirmación")
}

Luego tienes otro archivo llamado app.js el cual utiliza la función msg que está en el archivo util.js

// Archivo: app.js

msg();

Entonces tu archivo HTML podría verse como este:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    Ejemplo de modulos
  </body>

  <!-- archivos de js -->
  <script src="util.js" charset="utf-8"></script>
  <script src="app.js" charset="utf-8"></script>

</html>

Si lo ejecutas, el programa funciona correctamente y esta divido en 2 archivos, entonces: ¿Cual es el problema? y ¿para que se usan los módulos de JS?

Bueno, el problema esta cuando tienes muchos archivos y debes de incluir los archivos en el orden en que los necesitas. Por ejemplo, si en el código anterior colocas los archivos en el orden inverso, entonces el programa genera un error y deja de funcionar.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    Ejemplo de modulos
  </body>

  <!-- archivos de js (en orden inverso) -->  
  <script src="app.js" charset="utf-8"></script>
  <script src="util.js" charset="utf-8"></script>
</html>

Al correr el programa de esta forma, veras un error como este:

Error al no incluir los archivos js en el orden correcto

Como usar módulos en JS

Ahora veamos como se vería este código usando los módulos de JS, primero definamos el archivo util.js, aquí vamos a agregar la palabra export antes de la función que vamos a reutilizar en otro archivo.

export function msg()
{
   console.log("Mensaje de confirmación")
}

Ahora editamos el archivo app.js, primero colocamos la palabra import para decir que vamos a importar una función de otro archivo, el nombre de la función se coloca entre llaves { } y con la palabra from vamos a indicar la ubicación del archivo en donde está la función que necesitamos, luego solo llamamos a la función.

import {msg} from './util.js';
msg();

En el archivo HTML solo vamos a llamar al archivo principal, por que él se encarga de extraer las funciones que necesite de los demás archivos de JS. También es importante notar que al incluir el archivo app.js usamos type="module" (sin esto veremos un error de sintaxis)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    Ejemplo de modulos
  </body>

  <script type="module" src="app.js" charset="utf-8"></script>

</html>

Conclusiones

Como puedes ver, al usar los módulos de JS puedes evitar errores al incluir archivos en un orden diferente y además el código de ve más ordenado.