Modulos en Javascript

En este apartado veremos como utilizar los módulos en JavaScript, los módulos aparecieron en el año 2015 junto con ES6. De hecho, hoy en día todo navegador debería soportar ya utilizar módulos.

Empecemos creando nuestro archivo index.html donde le especificaremos que a index.js lo trate como un modulo.

No tome este HTML como si fuera uno absoluto, es simplemente una plantilla que poseo para generar rápidamente un archivo HTML.

lo importante aquí es como llamo el script siendo este de tipo modulo type="module" y en la parte HTML el main que pose un id = "main"

index.html

<!doctype html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/main.css">
        
    </head>
    <body>
        <script type="module" src="index.js"></script>
        <header></header>
        <p>puta madre no veo nada</p>
        <main id="main">
        </main>
        <footer></footer>
    </body>
</html>

Veremos ahora como sería nuestro index.js, aquí importaré un módulo a.js que simplemente es un archivo creado por mí en una carpeta llamada modules.

index.js

import {rcont,content} from './modules/a.js'

rcont();
document.querySelector("#main").innerHTML = content;

Veamos nuestro archivo a.js

./modules/a.js

const content = `some content for the index maybe this will not work`;

function rcont(){
    alert ("something");
}
//export default content;
export {rcont,content}

Vemos que en mi modulo a.js estamos exportando y lo que exporo es rcont y content export {rcont,content}

Import

Con la sentencia import podemos importar funciones que sean exportadas desde un modulo.

A comtinuacion veremos distintas sintaxis de import y comentaremos lo que parezca preciso comentar

Sintaxis

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

defaultExport -sería el export que definimos por defecto en el módulo que estamos llamando

as nos permite darle un alias a lo que estamos exportando

{ } dentro de estos corchetes indicamos que funciones estamos importando

from indicará de donde estamos importando.

Los archivos que son módulos algunas veces pueden poseer la extensión .mjs esta no siempre es admitida por las distintas herramientas, inclusive es posible que algunos navegadores no la soporten, pero eso escapa a lo que queremos tratar aquí.

Export

La sentencia export es utilizada en los módulos para exportar funciones, objetos, datos. A continuación veremos sus distintas sintaxis

Sintaxis

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // también var
export let name1 = …, name2 = …, …, nameN; // también var, const
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function (…) { … } // también class, function*
export default function name1(…) { … } // también class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

default -sería la función, objeto o data que exportaremos por defecto

as nos permite darle un alias a lo que estamos exportando

{ } dentro de estos corchetes indicamos que funciones, objetos, data estamos exportando. Dentro de estos corchetes podemos separar por, e incluso usar as para indicar un alias.

from en el caso de export indica que estamos agregando un módulo para ser explotado

tenga en cuenta que solo puede haber un default export

Category: javascript

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.