Exportar e Importar Módulos en JavaScript
En esta página:
En JavaScript los módulos son esencialmente librerías que se incluyen en el código que estamos escribiendo, de esta manera se conectan ambos códigos juntos y esto nos permite llamar a funciones que realizan determinadas tareas y han sido escritas en las librerías que importamos, nos ayuda a tener que evitar que escribir todo el cuerpo de la función en el nuevo archivo JavaScript, pero es importante conocer como debemos importar y exportar los módulos en JavaScript y en este Post te explicaré como hacerlo.
Antes de continuar con este Post, te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):
Spotify:
Sound Cloud:
Bien ahora continuemos con el Post: Exportar e Importar Módulos en JavaScript.
Exportar un Módulo
En JavaScript existe un objeto especial llamado module.exports y cuando este objeto es usado llama y expone a todas las funciones de un determinado módulo y están quedas accesibles para poder ser usadas en el nuevo archivo en donde se define module.exports.
Veamos a continuación un ejemplo en JavaScript en donde se hace uso del objeto module.exports, definimos 2 funciones simples para calcular e imprimir el área y el perímetro de un rectángulo, el código con las funciones lo guardamos en un archivo con el nombre milibreria.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Función Area let area = function (largo, ancho) { let rectanguloarea = largo * ancho; console.log("El área del rectángulo es ' + rectanguloarea + 'unidad cuadrada'); } // Función perimetro let perimetro = function (largo, ancho) { let rectanguloperimetro = 2 * (largo + ancho); console.log('El perímetro del rectángulo es' + rectanguloperimetro + 'unidad(es)'); } // Exportamos las funciones module.exports = { area, perimetro } |
Si has trabajado con Frameworks como React JS, puedes ver que al final de un componente este se suele exportar, no es el mismo código pero es una referencia sobre como se exporta el código JavaScript en un proyecto. Ahora veamos como se importa un módulo en JavaScript.
Importar un Módulo
En JavaScript importar un módulo significa incluir funciones de una determinada librería, que pueden ser usadas en el código en donde se importo el determinado módulo. Para importar un módulo podemos hacer uso de la función ‘require’ en la cual le pasamos el nombre de la librería con su ruta relativa.
Por ejemplo supongamos que tengo una carpeta en donde tengo un archivo llamado app.js, ahora voy a crear una librería en la misma carpeta, le daré el nombre de archivo milibreria.js, luego puedo llamar o importar esta librería haciendo uso de la función require, esta toma el nombre del módulo definido en el archivo milibreria.js:
1 2 3 4 5 6 7 8 9 10 11 |
// Importo el archivo milibreria.js que contiene las funciones area y perimetro const libreria = require('./milibreria'); let largo = 18; let ancho = 9; // Llamo a las funciones definidas en el archivo milibreria.js libreria.area(largo, ancho); libreria.perimetro(largo, ancho); |
Si ejecuto el código anterior, obtendré lo siguiente:
1 2 3 4 5 |
// Resultado El área del rectángulo es de 162 unidades cuadradas El perímetro del rectángulo es de 54 unidad(es) |
Con esto he usado las funciones que exporte del archivo milibreria.js en el archivo app.js
Conclusión
De esta manera podemos importar una o varias librerías en otro archivo JavaScript, en algunas ocasiones puede que necesites hacer la exportación e importación de otra manera, esto puede cambiar dependiendo de lo que necesites hacer, pero en este Post te doy la idea de como debes hacer estas tareas en JavaScript.
Nota(s)
- El código mostrado en este Post, puede ser modificado, quedar obsoleto o continuar vigente, esto no depende de mí, si no de los Desarrolladores que dan soporte a JavaScript.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- JavaScript
- 27-03-2020
- 03-04-2020
- Crear un Post - Eventos Devs - Foro
Social
Redes Sociales (Developers)
Redes Sociales (Digital)