¿Sabes cómo cargar un módulo en JavaScript? Los módulos en JavaScript son una manera de organizar el código de nuestro proyecto en distintas unidades lógicas sin perder la usabilidad o la relación de nuestros elementos. Hay muchas formas de escribir módulos, pero la regla general es que necesitamos exportar e importar los elementos de un archivo a otro para que puedan usarse. Dada la importancia de los módulos para una buena programación, en este post te enseñaremos cómo cargar un módulo en JavaScript.
¿Cómo cargar un módulo en JavaScript?
Antes de enseñarte cómo cargar un módulo en JavaScript, te sugerimos leer nuestro post sobre cómo funcionan los ES6 Modules en este lenguaje de programación. Esto te ayudará a comprender la lógica detrás de cómo escribiremos las siguientes líneas de código.
Ahora, cargar un módulo en JavaScript se basa en la creación de distintos archivos que contengan elementos con un mismo propósito. Esto hace que podamos dividir nuestro proyecto en distintas unidades para que sea más fácil de leer y modificar. Una vez creados los módulos, podemos hacer que los elementos de cada uno sean accesibles desde todos los archivos usando las palabras clave de exportación e importación. En el caso de los ES6 Modules, estas palabras son export e import.
Supongamos que estamos creando una liga deportiva en la que queremos programar los distintos partidos. Para ello, tenemos un string de equipos y puede que queramos que este string tenga su archivo propio, en el que podríamos, en el futuro, insertar los strings de los equipos de cada liga. Esto nos ayudaría a ubicar los equipos con más facilidad y reducir las líneas de código de nuestro archivo index.js.
Para ello, podemos crear un archivo nuevo, al mismo nivel de index.js, que se llame teams.js. Allí insertaremos el string de equipos tal cual lo tenemos, pero añadiéndole al inicio la palabra clave export. A continuación, te mostramos cómo quedaría:
export const teams = [‘Hoffernheim’, ‘Lyon’, ‘Chelsea’, ‘Barca’, ‘Madrid’, ‘Atlético’, ‘Rayo Vallecano’, ‘Wolfsburg’]Ahora, para poder utilizar este string en nuestro archivo de código principal, deberemos importarlo usando la palabra clave import:
import { teams } from './teams.js'Ten presente que, para importar cualquier elemento, necesitaremos guiar al programa hacia el archivo donde se encuentra alocado. Para ello, utilizamos el recorrido o path de Linux. Este nos dice que, cuando un archivo se encuentre al mismo nivel del nuestro, lo insertamos usando el comando punto-barra (./). Una vez insertamos esto en nuestro comando from, el programa nos sugerirá los distintos archivos que ve en el árbol de directorio. Basta con elegir el archivo y ejecutar nuestro código en JavaScript para ver cómo funciona.
¿Por qué no puedo cargar un módulo en JavaScript?
Puede que a la hora de ejecutar tu código en JavaScript usando un elemento importado de otro módulo, veas un error en tu terminal. Este error puede ser algo como SyntaxError: Cannot use import statement outside module. Esto puede suceder porque tu proyecto no está configurado para utilizar el formato ES6 Modules de JavaScript. Para resolver esto, el programa nos da las siguientes instrucciones sobre cómo cargar nuestro módulo:
Warning: To load an ES module, set "type": "module" in the package.json or use the .njs extension. Entre las opciones que nos da el programa, la manera más sencilla de cargar un módulo en JavaScript es crear un archivo package.json y configurar su tipo a module. Para crear este archivo, nos vamos a la terminal y, en vez de ejecutar el comando node, ejecutaremos el siguiente comando:
npm init --y Al darle enter a este comando, verás en el lado izquierdo que el programa nos ha creado un archivo package.json con una serie de claves y valores que actúan como configuraciones. Este documento se encuentra al mismo nivel del index.js. Entonces, siguiendo las instrucciones de nuestro programa, insertamos la siguiente clave-valor justo antes del último cierre de llave del objeto JSON.
"type": "module"Ahora, cuando ejecutemos nuestro código en el index como normalmente hacemos, veremos que todo funciona.
¿Qué sigue?
Ahora que sabes cómo cargar un módulo en JavaScript, tienes las herramientas necesarias para organizar y dividir tus propios proyectos. Para obtener más herramientas que te ayudarán a dominar JavaScript, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Aquí aprenderás a dominar otros lenguajes de programación y crearás tus propios proyectos con ayuda de nuestros profesores. ¿A qué esperas para matricularte? ¡Anímate a dar el siguiente paso para ser un experto en desarrollo web!
