Anuncios

Bienvenidos sean a este post, hoy repasaremos como cargar los modulos.

Anuncios

Hasta ahora vimos que para cargar/importar modulos desde CommonJS es mediante require y para ES6 a traves de import pero aun debemos cubrir algunos detalles mas, si vienen de posts anteriores en los cuales ya discutimos las diferencias de formatos y archivos entre ambos estandar pero hoy nos centraremos en como cargarlos.

Anuncios
Anuncios

Ya mencionamos que require es solo para cargar modulos CommonJS, este lo carga de manera sincronica, es decir que solo lo devolvera cuando el modulo este completamente cargado. De manera predeterminada sabemos que CommonJS no puede cargar modulos de ES6, aunque en este post vimos como mediante la funcion import() podemos realizarlo porque es una funcion asincronica y esta devuelve una promesa pero esto da como resultado que no podamos usarlo como un objeto de top-level pero podemos usarlo en una funcion:

module.exports.usesES6module = async function() {
    const es6modulo = await import('./es6-modulo.mjs');
    return es6modulo.functionCall();
} 
Anuncios

Ya que mencionamos el post donde vimos como importar el modulo ES6 en CommonJS vamos a tomar a analizar el siguiente codigo:

import('./ejemplo01.mjs')
        .then(ejemplo => {
                console.log(ejemplo.saludar());
                console.log(ejemplo.proximo());
                console.log(ejemplo.proximo());
                console.log(`contar = ${ejemplo.default()}`);
                console.log(`valor: ${ejemplo.valor}`);
        })
        .catch(err => {
                console.error(err);
        });
Anuncios
Anuncios

En este caso al momento de importarlo tal como mencionamos en el post antes mencionado al aplicarle un then nos permite poder utilizar la promesa que devuelve observen como mediante la flecha de funcion llamamos a cada uno de los elementos que permitimos acceso, por ultimo tenemos un catch para mostrar algun error en caso de suceder, por lo tanto si revisan ese post veran que antes devolvia un error pero ahora no porque podemos procesar a la promesa, con esto podemos decir que la funcion import nos permite esta conducta siempre y cuando adecuemos todo para que espere a la carga total del modulo y podamos usarlo.

Anuncios

En cambio la instruccion import solo la podemos usar en los modulos ES6, esto es asi porque la forma de utilizar a la instruccion import es interpretada como una url,, en este post vimos como podemos exportar e importar elementos en modulos ES6 y tambien vimos como podemos importar solamente algunos, en ese post usamos la siguiente linea:

import { saludar, proximo, cuadrado } from './ejemplo01.mjs';
Anuncios

Aqui solamente informamos el nombre de cada elemento sin necesidad de pasarlos completos como figura en el modulo de origen, por ejemplo podemos hacerlo lo siguiente:

import modulo from './ejemplo01.mjs';
Anuncios

En este caso como no existe ningun elemento con ese nombre por lo tanto lo utilizara como un alias pero lo asociara al elemento default del modulo, por lo tanto solo tendremos acceso a ese pero con ese nombre y para mostrarlo deberiamos usarlo de la siguiente manera:

console.log(modulo());
Anuncios

Otra particularidad que podemos usar es asignar un simil a namespace para los elementos importados para ello podemos hacer lo siguiente:

import * as modulo from './ejemplo01.mjs';


console.log("Saludo: " + modulo.saludar());
modulo.proximo();
modulo.proximo();
console.log("cuadrado: " + modulo.cuadrado());
Anuncios

Observen como al asignar el comodin a modulo mediante as para llamar a cada de uno de las funciones debimos agregar el «namespace», esto puede ser util para cuando tenemos mas de un modulo importado y algunas funciones pueden superponerse y asi evitar este inconveniente, por ultimo tambien podemos importar modulos CommonJS desde modulos ES6, veamos el siguiente caso:

import modulo from './ejemplo00.js';
console.log(modulo.proximo());
console.log(modulo.proximo());
console.log(modulo.saludar());
Anuncios

En este caso asignamos un namespace o alias al modulo importado y despues mediante este podemos llamar a las distintas funciones que hayamos importado, sobre este modulo hablamos en este post, en el mismo explicamos como hacer la exportacion mediante modules.exports y este sera nuestro «default» por lo tanto si deseamos hacer algo similar a cuando hablamos anteriormente del default en el modulo ES6:

import { default as modulo } from './ejemplo00.js';
Anuncios

Con esto podemos asumir que modules.exports aparece como el default cuando lo importamos, con esto hemos cubierto como cargar nuestros modulos tanto de CommonJS como de ES6.

Anuncios

En resumen, hoy hemos visto como cargar modulos, sus distintas formas para cada estandar y hemos repasado algunas que hemos visto en otros posts, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios

Donación

Es para mantenimento del sitio, gracias!

$1.50