Javascript: exportando e importando código (módulos).

En esta sección veremos como exportar e importar elementos de módulos o código de archivos Javascript. La sintaxis de importación y exportación de los elementos de módulos o código que veremos enseguida corresponde a la versión ES6 de Javascript.

Exportar código a archivos Javascript.

Hay dos formas de exportar código de archivos Javascript. Veamos el primer ejemplo usando la sintaxis “export default”.

/*
Código de un archivo llamado imprime.js
*/

const function imprimeAlgo() {
	console.log('Algo');
}
export default imprimeAlgo;

/*
Código alternativo válido de archivo imprime.js
*/

export default const function imprimeAlgo() {
	console.log('Algo');
}

El código anterior muestra dos alternativas de escribir el código javascript de un archivo llamado “imprime.js” usando la instrucción “export default”. En ambos casos la instrucción indica que exportará la función “imprimeAlgo” por defecto. La instrucción “export default” se usa principalmente cuando se quiere exportar une elemento por defecto, en éste caso una función, pero el elemento exportado puede ser un objeto, una constante o una función. Más adelante veremos la sintaxis de como se importará el código con este tipo de export.

Cuando se quieren exportar más elementos de un código se utiliza la siguiente sintaxis:

/*
Código que exporta varios elementos llamado rutinas_varias.js
*/

export const function1 = () => {
	...
}

export const funcion2 = () => {
	...
}

export const iva = 0.16;

El código anterior no está completo, sólo se pone para ejemplificar y esta escrito en un sólo archivo js. Este exporta el código de “rutina1”, “rutina2” e “iva” poniendo antes de cada función, objeto o variable constante la palabra “export”. Otra alternativa de escribir el mismo código es el siguiente:

/*
Código alternativo que exporta varios elementos llamado rutinas_varias.js
*/

const funcion1 = () => {
	...
}

const funcion2 = () => {
	...
}

const iva = 0.16;

export { funcion1, funcion2, iva };

En ésta forma de sintaxis alternativa de escribir la instrucción “export” se coloca entre llaves la lista de nombre de los elementos a exportar separados por comas. Los elementos a exportar, ya sean funciones, objetos o constantes deben estar previamente definidos.

Importar código de archivos Javascript.

Si tenemos archivos javascript que exportan código, como los ejemplos que vimos anteriormente, podemos importar ese código en nuestros archivos javascript como veremos en los ejemplos de código siguientes:

/*
Código para importar elementos del archivo javascript imprime.js
*/
import imprimeAlgo from './imprime.js'
import imprime from './imprime.js'

imprimeAlgo();
imprime();

En el ejemplo estamos importando dos veces el elemento exportado por defecto de un archivo llamado “imprime.js” que se encuentra en el mismo directorio o carpeta de nuestro código que ejemplificamos en la sección “Exportar código a archivos Javascript” más arriba. La sintaxis de la instrucción “import” del ejemplo anterior se emplea cuando los elementos son exportados con la instrucción “export default”. El nombre que le demos al elemento en el código donde importamos puede ser cualquier nombre válido, no necesariamente el mismo nombre del elemento en el archivo que la exporta como se muestra en el segunda línea “import”, donde le asignamos el nombre “imprime” a la función importada.

Cuando el archivo a importar contiene varios elementos exportamos, entonces usamos las siguientes sintaxis de la instrucción “import”:

/*
Código que importa código de un archivo que exporta varios elementos
que ejemplificamos en el archivo rutinas_varias.js
*/

import { funcion1 } from './rutinas_varias'
import { funcion1, funcion2, iva } from './rutinas_varias'
import { funcion1 as funcionuno } from './rutinas_varias'
import * as modulo from './rutinas_varias'

El primer “import” importa sólo la “funcion1” del archivo “rutinas_varias” que se encuentra en la misma carpeta o directorio del código o archivo que las importa. El nombre del elemento importado debe ser el mismo nombre como aparece en el archivo que la exporta y debe ponerse entre llaves.

Si queremos importar varios elementos exportados de un mismo archivo, se especifican sus nombres en una lista separada por comas dentro de llaves como en el segundo “import”. Los nombres de los elementos deben ser los mismos que se encuentran en el archivo exportado.

Podemos asignarle un nombre distinto al elemento exportado utilizando la palabra reservada “as” como se muestra en el tercer import. En este caso para llamar al elemento usaremos “funcionuno” en lugar de “funcion1”.

Si el archivo contiene una gran cantidad de elementos exportados y se quieren exportar todos ellos podemos utilizar la sintaxis del cuarto “import”. Utilizando el asterisco se importarán todos los elementos export del archivo javascript especificado y se podrá acceder a ellos a través de nombre alias que aparece después de la palabra reservada “as” en este caso a través del nombre “modulo”. Por ejemplo, para acceder a las funciones “funcion1” y “funcion2” las llamaríamos de la siguiente forma:

/*
Código llamando a los elementos exportados por el archivo "rutinas_varias"
utilizando el asterisco (*) al importar
*/
import * as modulo from './rutinas_varias'

modulo.funcion1();
modulo.funcion2();

Espero y esta entrada les sea útil. Cualquier observación favor de dejar tu comentario. ¡Hasta la próxima!